网站是左右两列板块布局,左侧规划了客服代码, 当鼠标下拉的时候, 微信客服代码会出现上移的情况。 为了提高转化,希望左侧客服模块跟随内容滚动。
网站左侧跟随滚动模块
这是截止目前最简单、高效的方法, 代码简洁。
代码
<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方法。