超简单的导航栏下拉至一定高度后固定在顶部的特效
2018-10-14 站长 站长日志
JS部分:
<script type="text/javascript">
$(function(){
var nav=$("#nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
if(sc.scrollTop()>=100){
nav.addClass("fixednav");
$(".navTmp").fadeIn();
}else{
nav.removeClass("fixednav");
$(".navTmp").fadeOut();
}
})
})
</script>
CSS部分
.fixednav {
position: fixed !important;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
}
<script type="text/javascript">
$(function(){
var nav=$("#nav"); //得到导航对象
var win=$(window); //得到窗口对象
var sc=$(document);//得到document文档对象。
win.scroll(function(){
if(sc.scrollTop()>=100){
nav.addClass("fixednav");
$(".navTmp").fadeIn();
}else{
nav.removeClass("fixednav");
$(".navTmp").fadeOut();
}
})
})
</script>
CSS部分
.fixednav {
position: fixed !important;
top: 0px;
left: 0px;
width: 100%;
z-index: 1;
}