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


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 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
微信小程序实现复选框效果
Dec 28 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
js实现点赞效果
Mar 16 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生成静态页面详解
2006/12/05 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
深入理解PHP中的count函数
2016/05/31 PHP
使用一个for循环将N*N的二维数组的所有值置1实现方法
2017/05/29 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
2011/07/08 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
vue项目中公用footer组件底部位置的适配问题
2018/05/10 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
如何在VUE中使用vue-awesome-swiper
2021/01/04 Vue.js
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python读取几个G的csv文件方法
2019/01/07 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
Django xadmin安装及使用详解
2020/10/26 Python
python解包概念及实例
2021/02/17 Python
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
社会治安综合治理管理责任书
2014/04/16 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
师德师风自查材料
2014/10/14 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题