JS实现部分HTML固定页面顶部随屏滚动效果


Posted in Javascript onDecember 24, 2015

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果。分享给大家供大家参考,具体如下:

我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。

这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。

使用这个特效代码需要注意,如果在侧边栏使用,则需要注意,侧栏中的栏目不能使用JavaScript动态加载,必须用静态的格式,否则在JavaScript会错误的计算页面高度,上下滚动的时候会出现错位现象。

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";}
    };
  }
})();

HTML代码:

<div id="box">
  <div id="float" class="div1">
    //随滚动移动的部分代码
  </div>
</div>

CSS代码:

#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
常见表单重复提交问题整理及解决方法
Nov 13 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
js实现圆盘记速表
Aug 03 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
javascript 开发之网页兼容各种浏览器
Sep 28 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
在vue项目中集成graphql(vue-ApolloClient)
Sep 08 Javascript
微信小程序实现发微博功能的示例代码
Jun 24 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 #Javascript
基于JS2Image实现圣诞树代码
Dec 24 #Javascript
jquery读写cookie操作实例分析
Dec 24 #Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 #Javascript
jQuery基于cookie实现的购物车实例分析
Dec 24 #Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 #Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 #Javascript
You might like
PHP children()函数讲解
2019/02/03 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
html 锁定页面(js遮罩层弹出div效果)
2009/10/27 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
基于 D3.js 绘制动态进度条的实例详解
2018/02/26 Javascript
详解mpvue开发小程序小总结
2018/07/25 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python控制台中实现进度条功能
2015/11/10 Python
python实现红包裂变算法
2016/02/16 Python
解决pycharm安装后代码区不能编辑的问题
2018/10/28 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
python做反被爬保护的方法
2019/07/01 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
python简单实现插入排序实例代码
2020/12/16 Python
Python实现小黑屋游戏的完整实例
2021/01/06 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
大学生求职计划书
2014/04/30 职场文书
小学班级特色活动方案
2014/08/31 职场文书
初中团委工作总结
2015/08/13 职场文书
门面租赁合同范文
2019/08/06 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL