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方法。
扫码添加技术【解决问题】
专注中小企业网站建设、网站安全12年。
熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascript等。
承接:企业仿站、网站修改、网站改版、BUG修复、问题处理、二次开发、PSD转HTML、网站被黑、网站漏洞修复等。
专业解决各种疑难杂症,您有任何网站问题都可联系我们技术人员。
本文来自博客园,作者:黄文Rex,转载请注明原文链接:https://www.cnblogs.com/hwrex/p/18340156
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步