滚动条事件—固定div(第一篇)

        最近在弄公司的官网，产品经理要求的特效是从魅族官网、苹果官网、360官网与36Kr官网上而来！最开始的时候我是各种惧怕，这全都是些大公司的网站，技术要求肯定特别高，我能做出来吗？但后来研究着研究着就通了！嘿嘿！这种感觉很棒！不啰嗦了！说正题......

       这里要讲得是苹果官网子页面也就是iPhone6 s的详细介绍界面里面的一个小效果：最上方有两个导航栏，第一个为整个网站的大导航栏，第二个为这个页面的小导航栏。

当滚动条像下滚动时，大导航栏不见，小导航栏就固定在最上方。

        我最开始的思路是这样的：获取滚动条滚动的距离，减去大导航栏的高度，当这个值等于0或大于0时用js改变小导航栏的css样式。

       但我最后的代码确是这样的（只是简单做个练习，不要计较美观）：

         <style>

        body{height: 2000px;}
        .h1{height: 50px; width: 100%;background-color: #000000;}
        .h2{height: 50px; width: 100%;background-color: red;}
       </style>

      <div class="h1"></div>
      <div class="h2" id="hh"></div>

     <script>
      window.οnscrοll=function(){
          //获取滚动条的垂直距离
           var h=document.documentElement.scrollTop||document.body.scrollTop;
           var t=document.getElementById("hh");
          if(h>=50){
              t.style.position="fixed";
              t.style.top="0";
          }
          if(h<50){
              t.style.position="static";
              t.style.top="50";
          }
      }
  </script>

      这里的思路是：直接获取滚动条距顶部的距离，大于等于大导航栏的高度时（滚动条向下滚动），小导航栏的position为fixed（固定）；当小于大导航栏的高度时（滚动条向上滚动），小导航栏的position值改为默认值static，取消固定。

       我算个小菜鸟，只是记录一些自己遇到的效果，想不断成长而已！有错误的地方请大家指正，我自己发现后也会改的！嘿嘿.......