php jq导航栏特效,用jQuery实现固定导航栏效果

jQuery实现固定导航栏效果：

固定导航栏效果

*{

margin: 0;

padding: 0;

}

body{

text-align: center;

}

.fixed{

top: 0;

left: 0;

position: fixed;

}

$(document).ready(function(){

//

入口函数

$(window).scroll(function(){

//

添加滚动事件

if($(window).scrollTop() >= $(".top").height()){

//

判断窗口的滚动如果大于top的高度就为nav添加fixed

$(".nav").addClass("fixed");

}else{

//

否则就为nav移除fixed

$(".nav").removeClass("fixed");

}

});

});