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


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 小贴士一星期合集
Apr 07 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
一个JavaScript防止表单重复提交的实例
Oct 21 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
jQuery实现邮箱下拉列表自动补全功能
Sep 08 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
前端构建工具之gulp的语法教程
Jun 12 Javascript
vuex进阶知识点巩固
May 20 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 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 方便水印和缩略图的图形类
2009/05/21 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
javascript深拷贝(deepClone)详解
2016/08/24 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
2017/06/17 Javascript
基于nodejs res.end和res.send的区别
2018/05/14 NodeJs
Vue.js实现的购物车功能详解
2019/01/27 Javascript
微信小程序实现购物页面左右联动
2019/02/15 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
npm全局环境变量配置详解
2020/12/15 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
微信跳一跳python代码实现
2018/01/05 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
柯基袜:Corgi Socks
2017/01/26 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
塔吉特百货公司官网:Target
2017/04/27 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
师德师风个人反思
2014/04/28 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
2014年城管工作总结
2014/11/20 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
同学聚会通知书
2015/04/20 职场文书
交通安全月活动总结
2015/05/08 职场文书
爱心捐款活动总结
2015/05/09 职场文书
春节晚会开场白
2015/05/29 职场文书
对公司的意见和建议
2015/06/04 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
golang switch语句的灵活写法介绍
2021/05/06 Golang