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

news/2025/1/16 18:03:47/文章来源:https://www.cnblogs.com/hwrex/p/18340156
网站是左右两列板块布局,左侧规划了客服代码, 当鼠标下拉的时候, 微信客服代码会出现上移的情况。 为了提高转化,希望左侧客服模块跟随内容滚动。网站左侧跟随滚动模块
这是截止目前最简单、高效的方法, 代码简洁。代码
<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方法。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/777097.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

宝塔/home 100%了,网站无法访问了

错误记录: 宝塔/home 100%了,网站无法访问了。报错【错误代码】 SQLSTATE【08004】【1040】Too many connections 错误原因: 宝塔/home 100% 解决方案: 宝塔界面/home满载,网站空间打不开!或者报错的问题非常普遍, 大多是网站日志占用了过多空间导致的, 大部分可以通过…

解决Maximum execution time of 120 seconds exceeded

在循环开始前加入代码://设置超时时间 ini_set("max_execution_time",18000); set_time_limit(0); set_time_limit() 当此函数被调用时,set_time_limit()会从零开始重新启动超时计数器。换句话说,如果超时默认是30秒,在脚本运行了了25秒时调用set_time_limit(20)…

网站报错 \\?\C:\Windows\inetsrv\config\applicationHost.config

错误记录: 网站报错 \\?\C:\Windows\inetsrv\config\applicationHost.config错误原因: 服务器C盘无空间 解决方案: 服务器C盘无空间,释放空间后问题解决。扫码添加技术【解决问题】专注中小企业网站建设、网站安全12年。熟悉各种CMS,精通PHP+MYSQL、HTML5、CSS3、Javascr…

磁盘IO性能分析

一、IO性能分析 1.1 IO性能、顺序访问和随机访问 如果去看硬盘厂商的性能报告,通常你会看到两个指标;一个是响应时间(Response Time); 另一个叫作数据传输率(Data Transfer Rate),数据传输率也称吞吐率。1.1.1 数据传输率 我们先来看一看后面这个指标,数据传输率。 我…

程序员的魔法石!

本文由 ChatMoney团队出品AI自己写代码,这只是传说?还是摸鱼新指南? AI出现之前,从来都是老板或产品经理提需求,程序员熬夜加班吭哧吭哧写代码或者是从Github,Stackoverflow上control+c,control+v。但随着大语言模型的发展,AI自动补全和理解意图的能力突飞猛进,不仅能…

overflow秒解外边距合并以及浮动导致的元素塌陷问题

外边距导致的合并问题: 1 处于一上一下位置的两个块级元素 在同时各自设置了上下边距时,二者间的外边距通常以 数值较大的一个作为两者间的外边距 而不是简单的数值相加 .box2{ width: 100px; height: 100px; background: deepskyblue; margin-top: 50px; …

LVS介绍

1 LVS介绍 1.1 简介 负载均衡技术有很多实现方案,有基于DNS域名轮流解析的方法、有基于客户端调度访问的方法、有基于应用层系统负载的调度方法,还有基于IP地址的调度方法。本文介绍基于传输层的负载均衡器LVS。 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 用…

使用 abortNavigation 阻止导航

title: 使用 abortNavigation 阻止导航 date: 2024/8/3 updated: 2024/8/3 author: cmdragon excerpt: 摘要:在Nuxt3中,abortNavigation是一个辅助函数,用于路由中间件内阻止不符合条件的页面访问,实现权限控制、错误处理及动态重定向,提升用户体验和应用可靠性 categor…

信友队集训营--1--链表

算法随笔(1): 信友队集训营--1--链表 链表 单向链表 计算机常见的两种存储结构分别是顺序存储和链式存储 顺序存储(以数组方式呈现) 优点有:操作方便,随机存取,查找元素的时间复杂度为O(1) 缺点有:需要预设空间,过大浪费,过小越界。插入或删除元素不方便,需要O(…

VMware NSX 4.1.2.5 发布,新增功能概览 (32 个已知问题修复)

VMware NSX 4.1.2.5 发布,新增功能概览 (32 个已知问题修复)VMware NSX 4.1.2.5 发布,新增功能概览 (32 个已知问题修复) VMware NSX 4.1.2.5 下载 - 网络安全虚拟化平台 构建具有网络连接和安全性的云智能网络,跨多种云环境支持一致的策略、运维和自动化。 请访问原文链接:…

分支结构

分支结构 目录分支结构一、分支结构分类单一分支双分支多分支switch语句二、应用场景三、设计原则一、分支结构分类单一分支 单一分支结构是最简单的分支结构,它只有一个条件判断,当条件为真(True)时执行一段代码,否则不执行任何操作。例如,使用if语句实现: if (条件) {…

m3u8下载工具N_m3u8DL-CLI的图形界面增强版

摘自:https://zhuanlan.zhihu.com/p/672615148简介(仅windows) N_m3u8DL-CLI是个非常方便的开源免费m3u8下载工具,自带一个叫Simple GUI的简单图形界面。 但是这个图形界面工具,太过简单,连任务列表都没有。所以,这里二次开发,增加了任务列表功能。 新增的所有功能,请…