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。