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方法。

相关文章
- 如何排查和解决虚拟主机流量过大的问题
-
如何解决修改服务器密码后系统内部报表报错问题
- 确保代码安全,掌握网站代码修改后的正确保存方式
- 如何解决FTP连接解析失败的问题
- 服务器升级后无法登录,提示用户名或密码错误。请问如何解决?
- 解决网站出现 502 Bad Gateway 错误
- 解决子网站域名无法执行安装程序的问题
- 如何在WordPress中更改站点名称并优化SEO
-
如何在公司网站上正确修改页面标题?
- 伪静态URL与动态和静态URL的对比及应用场景
-
MySQL 数据库无法访问的原因分析及解决办法
- 云服务器数据库响应慢?教你几招优化技巧
- 首页修改内容修改,如何更新网站首页的内容
-
阿里云服务器如何安装宝塔面板和WordPress?详细步骤指南
- 错误消息:TemplateNotFound_ Template "template.html" not found
- 错误消息:#1146 - Table 'ecms.表名' doesn't exist
-
错误信息 php未安装redis宝塔
-
重置PbootCMS用户密码
- 部分页面出现403错误,但其他页面正常访问
- 避免帝国CMS刷新栏目报错的技巧,快速解决问题
作者文章
- 重置网站后台密码-云服务器问题 1个月前 (01-08)
- 请问如何修改zblog的数据库连接信息? 1个月前 (01-08)
- 高效管理公司网站,选择合适的网站修改工具 1个月前 (01-08)
- 解决虚拟主机预装网站无法访问的问题 1个月前 (01-08)
- 请问如何修改zblog的数据库连接信息以适应新的主机环境? 1个月前 (01-08)
热门
- 1 为什么发布时间比实际时间相差8个小时? 你的php设置的时间有问题,是美国的时间。有以下两种方法可解决:1、修改php.ini,找到:date.timezone,把前面的分号去掉,并把值设为PRC2、修改e/class/config.php文件,把://@date_default...
- 2 帝国cms数据库配置文件是哪个? 4.0版本:e/class/connect.php4.6以上版本:e/class/config.php7.0以上版本:e/config/config.php...
- 3 建立数据表: phome_ecms_article 完毕..... “建立数据表: phome_ecms_article 完毕......You have an error in your SQL syntax. Check the manual that corresponds t...
- 4 访问前台页面,提示“xxx is close”说明该模块在后台被关闭,如何开启? 访问前台页面,提示“xxx is close”说明该模块在后台被关闭,如何开启?答:后台>系统>系统参数设置>基本属性:关闭前台模块相关功能,去掉对应模块的选择。...
- 5 后台登陆认证码修改 6.6及以下版本,修改e/class/config.php文件里的“$do_loginauth”变量内容;7.0以上版本,修改e/config/config.php文件里的“$ecms_config['esafe'][...
- 6 生成内容页提示“Table '*.phome_ecms_' doesn't exist......update ***_ecms_ set havehtml=1 where id='' limit 1 生成内容页提示“Table '*.phome_ecms_' doesn't exist......update ***_ecms_ set havehtml=1 where id='' limit 1...
- 7 错误内容:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server ve 错误内容:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right...
- 8 帝国cms全站域名更换说明 1.设置好参数设置的选项.2.替换相应的字段值:方法一:运行"update phome_ecms_news set newstext=REPLACE(newstext,'原域名','新域名'),titlepi...
- 9 编辑器默认会清除多余的word代码,如果要保留word格式怎么修改? CKeditor编辑器默认复制会清除多余word代码,如果要保留word格式可以按下面修改配置:修改 /e/admin/ecmseditor/infoeditor/config.js(后台) 和 /e/data/ecmseditor/inf...
- 10 帝国cms后台密码忘记,怎么办? 5.0及以前版本:用phpmyadmin修改phome_enewsuser表,把password字段的值设为:e10adc3949ba59abbe56e057f20f883e密码就是:1234565.1至7.0版本:用phpmyadmin修...
最新文章
- 重置网站后台密码-云服务器问题 1个月前 (01-08)
- 请问如何修改zblog的数据库连接信息? 1个月前 (01-08)
- 高效管理公司网站,选择合适的网站修改工具 1个月前 (01-08)
- 解决虚拟主机预装网站无法访问的问题 1个月前 (01-08)
- 请问如何修改zblog的数据库连接信息以适应新的主机环境? 1个月前 (01-08)
- 重置网站后台密码的正确途径 1个月前 (01-08)
- 解决网站频繁出现 500 内部服务器错误的方法 1个月前 (01-08)
- 移动端安全 - 正确修改移动端网站密码的方法与技巧 1个月前 (01-08)
- 帝国CMS进阶 - 修改帝国管理网站模板的详细步骤与实用技巧 1个月前 (01-08)
- 网站升级数据迁移之后无法访问 1个月前 (01-08)
标签列表
- 网站数据库错误什么意思 (0)
- 易优cms登陆后台 (1)
- 401 Unauthorized (1)
- 攻击网站违法吗 (0)
- typealiases标签 (0)
- 网页打开一段时间就不动了 (0)
- 显示 (0)
- 样式 (0)
- 易优cms插件合集 (0)
- 备案 (0)
- 改了 (0)
- 技术支持 (0)
- links (0)
- 添加 (0)
- 100 (0)
- 1251 (0)
- 帝国cms生成app (0)
- 网站运行情况 (0)
- ftp软件的作用 (0)
- 帝国cms信息反馈 (0)
- 时间为什么不准了 (0)
- 调用其他网站的软件 (0)
- 数据库损坏怎么办 (0)
- 宝塔面板mysql升级版本方法 (0)
- 网站首页显示不出图片 (0)