使元素遇顶固定

今天有人问我遇顶固定怎么做，这位朋友是刚入门，所以个人感觉非常简单的特效对刚入门的朋友还是有点阻碍，然后呢，我就在博客里写下了这个简单的小特效，先看一下效果图吧：

这个特效在网站中，还是比较常用到的，我就不写很多代码了，图方便，直接上div了

HTML：

<header>
    <div></div>
    <nav></nav>   
</header>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

这么多的<br>是为了有滚动条

CSS：

*{margin:0;padding:0;}
div{width:100%;height:90px;background-color:#000;}
nav{width:100%;height:60px;background-color:red;}

JS：

 var height;
        $(window).scroll(function(){
            height=$(window).scrollTop();//获取距离顶部的距离
            if(height>90){
                $("nav").css({"position":"fixed","top":"0","left":"0"});//让元素固定

            }else{
                $("nav").css("position","static");//取消固定
            }
        })

对了，需要用到jquery

下载一个引入就可以了

原理就是使用fixed固定定位，在网页中引入的时候，一定要考虑固定定位不在页面的问题，所以，在需要遇顶固定的元素下加一个div，当元素变成固定时，这个div的高度变成元素的高度，就可以解决这个问题，直接可以在if里写这行代码就行了