HTML侧边部分内容滑动跟随 左侧跟随滚动模块代码

说明：本站部分信息来源互联网，如您认为页面内容侵犯您的权益，请联系我们处理。

网站是左右两列板块布局，左侧规划了客服代码， 当鼠标下拉的时候， 微信客服代码会出现上移的情况。 为了提高转化，希望左侧客服模块跟随内容滚动。

网站左侧跟随滚动模块

这是截止目前最简单、高效的方法， 代码简洁。

代码

<div id="box">

<div id="float" class="div1"> 

在这里放你要调用的模块

</div>

</div>

网页中设置好之后， 需要添加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方法。

更新日期:2023-04-13