fixed属性在css样式中一般不是很常用,但用起来的时候也是频繁的。刚才一个读者想要知道固定的一些信息,我就在这里说一下好了,按照本站的导航条固定方式,首先是一个banner,再然后是一个导航条,其余是主体内容。

<div class="header"></div>
<div class="nav"></div>
<div class="fixed"></div>
<div class="main"></div>

  header用于顶部一些其他显示内容,nav用于滚动条滚动的时候固定的元素,fixed用于在设置固定的时候为了好看填充高度,因为设置了固定后本身的高度就不会占页面整体高度了,main用于底部以下其他主体内容。

    <style>
      *{
        margin:0;
        padding:0;
      }
      .header{
        height:100px;
          background-color:green;
      }
      .nav{
        height:40px;
        width:100%;
        background-color:blue;
        top:0;
        left:0;
        right:0;
      }
      .main{
        height:1000px;
        background-color:black;
      }
    </style>

  css就简略的设置一下就行了,主要是看效果。

蓝色部分是滚动条达到某个高度的时候固定他。

JQ库使用百度的.

      <script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
      <script type="text/javascript">
          var scrollTop;
          $(window).scroll(function(){//滚动条触发事件
              scrollTop = $(window).scrollTop();//获取当前距离顶部的高度
              if(scrollTop>100){//判断如果大于100 及窗口抵达蓝色部分
                  $(".nav").css("position","fixed");//设置固定
                  $(".fixed").css("height","40px");//设置一个40px的高度,不然会瞬间固定,造成一个视觉不好的效果
              }else{
                $(".nav").css("position","static");//取消固定
                $(".fixed").css("height","0"); }//取消高度
          })
      </script>

对于fixed固定是不占页面高度宽度的,就像绝对定位absolute一样,但是fixed只是面对浏览器窗口,绝对定位是面对整个html文档。上面加上一个高度的意思就是,导航条高度本身是40px,如果直接设置了fixed则立刻就会空出一个40px的高度来,那么这个导航条就会瞬移上去,强迫症一般是感觉不爽的.那么就得加上一个div来填充需要的40px。

demo地址

【七空幻音】fixed固定导航条