首页 > 其他分享 >HTML侧边部分内容滑动跟随 左侧跟随滚动模块代码

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

时间:2024-08-03 10:38:42浏览次数:10  
标签:oDiv 代码 侧边 iE6 跟随 HTML 左侧 var

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



网站左侧跟随滚动模块
这是截止目前最简单、高效的方法, 代码简洁。

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

 

标签:oDiv,代码,侧边,iE6,跟随,HTML,左侧,var
From: https://www.cnblogs.com/hwrex/p/18340156

相关文章

  • 【Java】Jsoup 解析HTML报告
    一、需求背景有好几种报告文件,目前是人肉找报告信息填到Excel上生成统计信息跟用户交流了下需求和提供的几个文件,发现都是html文件其实所谓的报告的文件,就是一些本地可打开的静态资源,里面也有js、img等等二、方案选型前面老板一直说是文档解析,我寻思这不就是写爬虫吗....因......
  • HTML5+CSS3笔记(Xmind格式):第一天
    Xmind鸟瞰图:文字总结:1.新增语义化标签:-header:定义文档的页眉,用来表示页面的头部。-nav:定义导航链接的部分nav元素代表页面中的导航,其中的导航元素链接到其他页面或当前页面的其他部分。-main:主体信息-aside:侧边栏-article:article元素表示文档、页面或应用程......
  • html标签语法总结
    HTML(超文本标记语言)是用于创建网页的标准标记语言。以下是HTML的基本语法格式:文档声明位于HTML文件的开头,告知浏览器使用的HTML版本,常见的有:<!DOCTYPEhtml>表示HTML5文档类型。<html>标签这是HTML文档的根标签,所有其他的HTML元素都必须嵌套在<html>标......
  • 08HTML+CSS
    昨天完成了一个小练习,将之前学习的内容都整合到一起了。1<!DOCTYPEhtml>2<htmllang="en">34<head>5<metacharset="UTF-8">6<metaname="viewport"content="width=device-width,initial-scale=1.0......
  • Python 下载 html 中的 图片
    安装requests、beautifulsoup4库#安装requests、beautifulsoup4库pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simple完成代码#pipinstallrequestsbeautifulsoup4-ihttps://pypi.tuna.tsinghua.edu.cn/simpleimportosimportr......
  • HTML基础笔记
    1.HTML语法规范1.1基本语法概述1.HTML标签是由尖括号包围的关键词,例如<html>2.HTML通常是成对出现的,叫做双标签,分别是开始标签,结束标签。<html></html>3。有些特殊的标签必须是单标签。<br/>1.2标签关系双标签关系可以分为两类:包含关系和并列关系。<html><head......
  • 14.前端html
    html一、基本介绍1、定义:html是一种超文本标记语言,也是一种标识性语言(不是编程语言)标记:记号(绰号)超文本:就是页面内容可以包含图片、链接,音乐,视频等素材。2、为什么学习html?(1)测试页面元素,了解页面页面元素(页面是html语言编写的)(2)进行ui自动化需用到元素定位3、html有哪些特......
  • 为什么得到的html content.txt是空的?
    该计划的目标很简单,就是获得tageschau.de的头条新闻。一开始很正常,但是运行几次后什么也得不到。importrequestsfrombs4importBeautifulSoupheaders={'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64;x64)''AppleWe......
  • html5十大特性
       HTML5总体比HTML4多了十个新特性,但其不支持IE8及IE8以下版本的浏览器。语义化标签表单功能视频和音频Canvas绘图SVG绘图地理定位拖放APIWebWorkerWebStorageWebSocket1、语义化标签结构化元素 HTML5提供的新元素可以更好的描述网页文档结构,比如: 其他......
  • html学习
    1、前期准备1、语法规范1、所有的标签都必须包含在开始标签结束标签,里面都是成对出现的,但是有些标签是单标签,,但是单标签非常的少2、标签关系包含关系就是嵌套的关系(父子关系),html包含了head这个标签并列关系head和body是并列关系3、结构标签html标签是......