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>

  

![效果图片](https://upload-static.acgxt.com/upload/image/20160515/20160515003828_71166.jpg "效果图片")

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

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固定导航条