JS實現網站吸頂條
阿新 • • 發佈：2020-01-09
本文例項為大家分享了JS實現網站吸頂條的具體程式碼，供大家參考，具體內容如下
今天寫一個關於網站中吸頂條的思路
1、吸頂條就是在網頁移動到一定距離的時候，讓某個內容，固定顯示在一個位置
2、獲取網頁中滾動條的滾動距離
3、判斷要顯示的內容在滾動條，滾動到一定距離後，讓他顯示
下面是程式碼部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#content{
width: 100%;
height: 50px;
background: red;
}
.father{
position: fixed;
top:0;
left: 0;
}
</style>
</head>
<body style="height: 3000px;">
<p>kdsjfkljsdklfjd</p>
<p>kdsjfkljsdklfjd</p>
<p>kdsjfkljsdklfjd</p>
<p>kdsjfkljsdklfjd</p>
<p>kdsjfkljsdklfjd</p>
<p>kdsjfkljsdklfjd</p>
<div id="content"></div>
</body>
<script>
//繫結滾動條移動事件
window.onscroll = function(){
var bb = document.body.scrollTop || document.documentElement.scrollTop;//解決瀏覽器相容問題
if(bb >500){
//小與500的時候，讓它新增這個類
content.className = "father"
}else{
//否則就是空
content.className = "";
}
}
</script>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。