吸顶导航

效果图:

html

<div id="nav" class="">
<p>吸顶demo</p>
</div>

css

body{
position: relative;
}
#nav{
position: absolute;
right: 300px;
top: 300px;
font-size: 16px;
color: #fff;
background: #000;
padding: 20px 50px;
}
#nav.fixed{
position: fixed;
top: 0;
}

js

<script type="text/javascript" src="http://www.eol.cn/js/common/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var l = true;
var top = $("#nav").offset().top;
function doFix()
{
var scrolla = $(window).scrollTop();
var dis = parseInt(top) - parseInt(scrolla);
if(l && dis <= 0)
{
$("#nav").removeClass().addClass("fixed");
l = false;
}
if(!l && dis > 0)
{
$("#nav").removeClass("fixed");
l = true;
}
}
$(window).scroll(doFix);
})
</script>

插件配置

1.拷贝对应html,css,js代码到页面中,js代码写在页面最底部