党娟博客

根据页面滚动滑动,自动悬浮导航、悬浮分类代码

1. html示例代码

<div style="height:200px; background:#e6e6e6;">占位div1</div>
<div id="page-nav" class="page-nav">
此容器滚动到页头自动悬停
</div>
<div style="height:2000px;>占位div2</div>


2. 以下为js代码

<script type="text/javascript">
var obj11 = document.getElementById("page-nav");
var top11 = getTop(obj11);
var isIE6 = /msie 6/i.test(navigator.userAgent);
window.onscroll = function(){
 var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 if (bodyScrollTop > top11){
  obj11.style.position = (isIE6) ? "absolute" : "fixed";
  obj11.style.top = (isIE6) ? bodyScrollTop + "px" : "0";
  obj11.style.width = (isIE6) ? "width" : "100%";
  obj11.style.zIndex = (isIE6) ? "zIndex" : "1000";
  obj11.style.borderBottom = (isIE6) ? "borderBottom" : "1px solid #e6e6e6";
 } else {
  obj11.style.position = "static";
 }
}
function getTop(e){
 var offset = e.offsetTop;
 if(e.offsetParent != null) offset += getTop(e.offsetParent);
 return offset;
}
</script>

 


发表我的评论

Hi,您需要填写昵称和邮箱!

  • 必填项