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 相关文章推荐
基于Jquery的简单&amp;简陋Tabs插件代码
Feb 09 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
Bootstrap的modal拖动效果
Dec 25 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 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安全配置详细说明
2011/09/26 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP实现的策略模式示例
2019/03/20 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
javascript Array.remove() 数组删除
2009/08/06 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
Javascrip实现文字跳动特效
2016/11/27 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
2017/10/26 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[01:09:40]Newbee vs Pain 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
python八大排序算法速度实例对比
2017/12/06 Python
对numpy中数组元素的统一赋值实例
2018/04/04 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
乡镇爱国卫生月活动总结
2014/06/25 职场文书
党的生日演讲稿
2014/09/10 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书
同学聚会开幕词
2019/04/02 职场文书
MySQL去除密码登录告警的方法
2022/04/20 MySQL
Spring Boot配合PageHelper优化大表查询数据分页
2022/04/20 Java/Android