侧栏跟随滚动的简单实现代码


Posted in Javascript onMarch 18, 2013

浏览网站时经常看到有的网站上,侧栏里的有些内容滚动到页面顶端以后就固定在那个位置,不再跟随滚动条而滚动。这种效果叫做“侧栏跟随滚动”。它对于那些不希望被滚动到页面之外的内容是非常有用的。
侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在NEOEASE写的一篇文章中介绍的很清楚,一种是借助jQuery来实现,这种方法对于那些平时不需要加载jQuery库的网站来说,显然是一种负担(jQuery现在是越做越大了……)。另外一种方法是通过原生javascript编写的效果,这种方法相比上一种,要轻盈得多。但是,我还是不够满足,原生的javascript写的文件也有4K多,对于我这种至简至上的人来说,还是太繁杂了。那么有没有更简单的实现办法呢?

答案当然是肯定的。下面具体介绍。
先说html文件(当然也可是动态文件,里面总归有html代码的)

<div id="box"> 
<div id="float" class="div1"> 
在这里加入需要跟随滚动的内容 
</div> 
</div>

然后是CSS代码
#box{float:left; position:relative;width:250px;} 
.div1{width:250px;} 
.div2{position:fixed;_position:absolute;top:0;z-index:250;}

最后是JS代码(可以放在需要滚动的页面中,也可以放在单独的JS文件中再调用)
(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";} 
}; 
} 
})();

OK,大功告成,够简单吧。
最后给个 示例。
Javascript 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
button没写type=button会导致点击时提交
Mar 06 Javascript
JS异步文件上传(兼容IE8+)
Apr 02 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
Jul 28 Javascript
vue路由分文件拆分管理详解
Aug 13 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 #Javascript
Javascript判断对象是否相等实现代码
Mar 18 #Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 #Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
Mar 18 #Javascript
javascript定时变换图片实例代码
Mar 17 #Javascript
JS前端框架关于重构的失败经验分享
Mar 17 #Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 #Javascript
You might like
php报表之jpgraph柱状图实例代码
2011/08/22 PHP
php获取文件后缀的9种方法
2016/03/22 PHP
jquery ready函数源代码研究
2009/12/06 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
JS加载器如何动态加载外部js文件
2016/05/26 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue完成项目后,打包成静态文件的方法
2018/09/03 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
使用 Python 写一个简易的抽奖程序
2019/12/08 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
keras中的卷积层&amp;池化层的用法
2020/05/22 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
如何在C# winform中异步调用web services
2015/09/21 面试题
恒华伟业笔试面试题
2015/02/26 面试题
大学生求职简历的自我评价
2013/10/14 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
劳动模范事迹材料
2014/01/19 职场文书
新品发布会策划方案
2014/06/08 职场文书
幼儿园标语大全
2014/06/19 职场文书
大学计划书范文800字
2014/08/14 职场文书
计生工作先进事迹
2014/08/15 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
简单的辞职信范文(2016最新版)
2015/05/12 职场文书
大学生党课心得体会
2016/01/07 职场文书
python基础之while循环语句的使用
2021/04/20 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers