實現滾輪監聽，導航欄置頂的效果。
阿新 • • 發佈：2018-07-02
nav idt ack doc color win ID cti col 為了項目的制作，需要一個導航欄置頂的效果，遇到了點難度，但還是克服了，通過比較導航和滾動條的高度實現置頂效果
<div id="daohang" style="width:100%;height: 80px; background: black; top: 0px; left: 0px;color: white;text-align: center;position: absolute;">123</div>
<script type="text/javascript">
$(function(){
//引入id標簽;
var navtive=$("#daohang");
//設置導航標簽為置頂;
var offsetTop=navtive.offset().top;
//定義一個監聽高度;
var scrollHeight=$(document).scrollTop;
fn(navtive,offsetTop);
//設置監聽事件;
$(window).scroll(function(){
fn(navtive,offsetTop);
});
//調用方法;
function fn(navtive,offsetTop){
var scrollHeight=$(document).scrollTop();
if(offsetTop>scrollHeight){
navtive.css("top",offsetTop);
}else{
navtive.css("top",scrollHeight);
}
}
});
</script>
實現滾輪監聽，導航欄置頂的效果。