zoukankan      html  css  js  c++  java
  • ECSTORE导航吸顶功能

    ecstore导航吸顶功能,在导航父元素中加入id,如:

     1 <div id="mainNav1"></div> 

    在footer.html中添加以下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";}
    16  
    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>

    测试看看效果吧~

  • 相关阅读:
    卸载office密钥的命令
    断言的使用
    stm32的NVIC是什么?
    STM32 Cube mx 安装
    不用移位计算获得高位数据
    分组数据
    Vue Router
    存储过程
    js 中 json.stringfy()将对象、数组转换成字符串
    js中 json对象的转化 JSON.parse()
  • 原文地址:https://www.cnblogs.com/CHEUNGKAMING/p/4076838.html
Copyright © 2011-2022 走看看