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


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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
IE中jscript/javascript的条件编译
Sep 07 Javascript
JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器
Oct 11 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
JavaScript this指向相关原理及实例解析
Jul 10 Javascript
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
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
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
js控制表单操作的常用代码小结
2013/08/15 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
2016/08/05 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JS实现在文本指定位置插入内容的简单示例
2017/12/22 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
jQuery实现增删改查
2020/12/22 jQuery
Python实现Dijkstra算法
2018/10/17 Python
详解利用python+opencv识别图片中的圆形(霍夫变换)
2019/07/01 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python with关键字,上下文管理器,@contextmanager文件操作示例
2019/10/17 Python
Python日志处理模块logging用法解析
2020/05/19 Python
用HTML5制作一个简单的桌球游戏的教程
2015/05/12 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
马来西亚在线健康商店:Medipal Malaysia
2020/04/13 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
技术转让协议书
2016/03/19 职场文书