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


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 getElementsByClassName 和js取地址栏参数
Jan 02 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
AngularJS实现路由实例
Feb 12 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
Vue波纹按钮组件制作
Apr 30 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
Three.js实现简单3D房间布局
Dec 30 Javascript
JS数组方法reverse()用法实例分析
Jan 18 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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页面编码的两种方法示例介绍
2014/03/03 PHP
thinkphp实现图片上传功能分享
2014/03/04 PHP
jquery 简单图片导航插件jquery.imgNav.js
2010/03/17 Javascript
JsDom 编程小结
2011/08/09 Javascript
intro.js 页面引导简单用法 分享
2013/08/06 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS实现的3D拖拽翻页效果代码
2015/10/31 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
Python入门篇之面向对象
2014/10/20 Python
详解Django框架中的视图级缓存
2015/07/23 Python
python实现八大排序算法(2)
2017/09/14 Python
Python实现修改文件内容的方法分析
2018/03/25 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
Python基于机器学习方法实现的电影推荐系统实例详解
2019/06/25 Python
Python OpenCV视频截取并保存实现代码
2019/11/30 Python
Python Pandas 转换unix时间戳方式
2019/12/07 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
毕业生自我鉴定
2013/11/05 职场文书
效能风暴心得体会
2014/09/04 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
2016银行招聘自荐信
2016/01/28 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript
python微信智能AI机器人实现多种支付方式
2022/04/12 Python