在頁(yè)面滑動(dòng)到某一個(gè)位置時(shí),我們經(jīng)常需要顯示或隱藏一些div層等,這里需要用到滾動(dòng)事件,及獲取距離頂部的高度屬性, 這里寫(xiě)一簡(jiǎn)單的示例,拋磚引玉
CSS內(nèi)容:
body{height: 3000px;}
.top{
position: fixed;
top:0;
left:0;
right:0;
height: 50px;
background-color: orange;
min-width: 600px;
max-width: 600px;
margin:0 auto;
}
.body{
height: 460px;
background-color: green;
}html標(biāo)簽:
<div class="top"></div> <div class="body"></div>
JS代碼:
$(function(){
$(document).scroll(function(){ //頁(yè)面滾動(dòng)時(shí)觸發(fā)
let scrollTop = $(this).scrollTop(); //頁(yè)面滑動(dòng)距離頂部的高度
console.log(scrollTop);
if(scrollTop > 460){
$(".top").css({"display":"none"})
}
else{
$(".top").css({"display":"block"})
}
})
})