javascript實現固定側邊欄
用javascript實現固定側邊欄，供大傢參考，具體內容如下
正在學習大前端中，有代碼和思路不規范不正確的地方往多多包涵，感謝指教
我們在逛某某商城的時候，或者某些網站的時候，通常會遇到有個東西叫做側邊欄，這個東西會跟隨我們瀏覽器瀏覽長度來進行變化1，從而實現相對窗口的固定位置1
**代碼如下**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cm{
position: absolute;
top: 300px;
margin-left: 1150px;
width: 60px;
height: 130px;
background-color: pink;
}
.w{
margin: 10px auto;
width: 80%;
}
.head{
height: 200px;
background-color: blue;
}
.banner{
height: 400px;
background-color: green;
}
.main{
height: 1000px;
background-color: hotpink;
}
span {
display: none;
/*position: absolute;
bottom: 0;*/
}
</style>
</head>
<body>
<div class="cm">
<span class="backTop">返回頂部</span>
</div>
<div class="head w">頭部區域</div>
<div class="banner w">banner區域</div>
<div class="main w">主體區域</div>
<script>
var cm=document.querySelector('.cm')
var banner=document.querySelector('.banner')
/*console.log(banner.offsetTop)*/
//被卷曲頭部的大小位置,寫在外面
var bannertop=banner.offsetTop
var cmtop=cm.offsetTop-bannertop
var main=document.querySelector('.main')
var goback=document.querySelector('.backTop')
var maintop=main.offsetTop
document.addEventListener('scroll',function () {
//頁面被卷去的頭部
/*console.log(window.pageYOffset)*/
//當卷曲頭部大於214，側邊欄改為固定
if (window.pageYOffset>bannertop){
cm.style.position='fixed'
cm.style.top=cmtop+'px'
}else {
cm.style.position='absolute'
cm.style.top='300px'
}
if (window.pageYOffset>maintop){
goback.style.display='block'
}else {
goback.style.display='none'
}
})
</script>
</body>
</html>
演示效果
代碼解釋
這裡用到瞭document的添加事件scroll，瀏覽器滾動事件，當滾動時，觸發函數。
這裡設置瞭一個變量為bannerTop，是中間那個綠色模塊頂部距離頁面最上方的距離，然後定義cmtop這個變量，cm為側邊欄到頂部的距離，cmtop=bannerTop-cm.offsetTop。然後判斷頁面卷曲的長度是否大於中間那個模塊距離頂部的距離，意思的頁面是否劃到中間這個模塊，如果劃到瞭中間這個模塊，那麼讓側邊欄的位置固定，然後側邊欄距離頂部的距離相應改變，這裡這個情況因為側邊欄與中間拿塊是相對靜止，所以，未卷到中間區域時，cmtop的值是恒定不變的，當卷到中間區域時，banner。Top的值變為負值，所以cmtop的值在相應的增加，並且把這個增加的值傳給側邊欄距離頂部的值，這也就出現瞭劃到中間區域，側邊欄相對靜止的情況。如果沒有滑倒中間區域，那麼側邊欄的位置還是默認的位置。
然後如果劃到瞭最後一個區域則出現‘回到頂部’這四個字在側邊欄上。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。