HTML側邊部分內容滑動跟隨 左側跟隨滾動模組程式碼

黄文Rex發表於2024-08-03
HTML
網站是左右兩列板塊佈局，左側規劃了客服程式碼， 當滑鼠下拉的時候， 微信客服程式碼會出現上移的情況。 為了提高轉化，希望左側客服模組跟隨內容滾動。



網站左側跟隨滾動模組
這是截止目前最簡單、高效的方法， 程式碼簡潔。

程式碼
<div id="box">
<div id="float" class="div1"> 
在這裡放你要呼叫的模組
</div>
</div>
網頁設定好程式碼之後， 需要加幾行css佈局樣式， 避免錯位
#box{float:left; position:relative;width:290px;}
.div1{width:290px;}
.div2{position:fixed;_position:absolute;top:0;z-index:290;}
我這裡的訴求是左側跟隨， 如果你是右側， 可以修改為float: right;。

網頁中設定好之後， 需要新增JavaScript程式碼

/*左側跟隨*/
(function(){

   var oDiv=document.getElementById("float");
   var H=0,iE6;
   var Y=oDiv;
   while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
   iE6=window.ActiveXObject&&!window.XMLHttpRequest;
   if(!iE6){
       window.onscroll=function()
       {
           var s=document.body.scrollTop||document.documentElement.scrollTop;
           if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
           else{oDiv.className="div1";}    
       };
   }

})();
總結
沒有其他額外程式碼， 一段div+css佈局，外加一個JavaScript方法。

相關文章