ECSHOP导航栏自动吸顶效果JS特效(IE8/FF)

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家

效果如图: 导航栏在页面滚动不可见时,自动吸附到页面顶部!

演示地址婷美官网:http://www.tingmeiyunchan.com

在模板中找到 page_header.lbi 文件,在最底部添加:
  1. <div id="mainNav1"></div>
复制代码
打开 page_footer.lbi

添加以下js代码:
  1. <script type="text/javascript">function getTop(e)
  2. {
  3. var offset=e.offsetTop;
  4. if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度
  5. offset+=getTop(e.offsetParent);
  6. return offset;
  7. }
  8. var myBlockTop = getTop(document.getElementById("mainNav1"));
  9. var oneDiv=document.getElementById("mainNav1");
  10. if(!!window.attachEvent)//ie浏览器下。
  11. {
  12. window.attachEvent('**croll',function(){
  13. if(document.documentElement.scrollTop/* +(document.body.clientHeight || window.innerHTML) */>= myBlockTop)
  14. {oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.left="0";oneDiv.style.display="block";oneDiv.style.zIndex="9999999999999";oneDiv.style.height="35px";oneDiv.innerHTML = document.getElementById("mainNav").innerHTML; }
  15. else{oneDiv.style.display="none";}

  17. });
  18. }
  19. if(!!window.addEventListener)//非ie浏览器下
  20. {
  21. window.addEventListener("scroll",function(){//document.body.scrollTop可保证chrome的正常。
  22. if(document.documentElement.scrollTop/* +(document.body.clientHeight || window.innerHTML) */>= myBlockTop||document.body.scrollTop>=myBlockTop)
  23. {oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.width="100%";oneDiv.style.zIndex="9999999999999";oneDiv.style.display="block";oneDiv.style.height="35px";oneDiv.innerHTML =document.getElementById("mainNav").innerHTML;}
  24. else{oneDiv.style.display="none";}
  25. });
  26. }</script>
复制代码

回答：
支持共享