长沙专业提供SEO网络推广、网站建设及竞价托管服务,请认准网址:www.langxingtui.com 移动应用 微信关注 联系我们 联系客服
JS网页特效

JS实现页面滚动到指定位置,DIV层定点悬浮!

发表时间:2018-10-27 作者:admin 浏览: 来源:未知
文章导读:style type=text/css .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;text-align:center} .header{height:150px} #nav{padding:10px;position:relative;top:0;background:#375069;width:1000px} #nav a{display:inline-block;margi...
<style type="text/css">
.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;text-align:center}
.header{height:150px}
#nav{padding:10px;position:relative;top:0;background:#375069;width:1000px}
#nav a{display:inline-block;margin:0 10px;color:#fff;width:15%}
p a{margin:0 10px;width:15%}
</style>
<script type="text/javascript">
window.onload = function(){
menuFixed('nav');
}
 
function menuFixed(id){
var obj = document.getElementById(id);
var objHeight = obj.offsetTop;
 
window.onscroll = function(){
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop < objHeight){
obj.style.position = 'relative';
}else{
obj.style.position = 'fixed';
}
}
}
</script>
<div class="wrapper">
  <div class="header"> </div>
  <div id="nav"> <a href="#">栏目名称</a> <a href="#">栏目名称</a> <a href="#">栏目名称</a> <a href="#">栏目名称</a> </div>
  <div id="content" style="text-align: left;">
    <p>JS实现页面滚动到指定位置,DIV层定点悬浮经典实例代码参考</p>
  </div>
</div>
返回上一页
上一篇:没有了
下一篇:没有了

最新文章
随机文章
快速提交您的需求

订单提交后,10分钟内,我们将安排工作人员和您联系!

热点资讯
最新资讯
Copyright © 2018-2019 长沙朗行SEO网络推广公司 版权所有 技术支持:Inkey同学
 
朗行文化传播有限公司
QQ在线咨询
客服咨询
咨询热线
18570345625