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


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对象的property和prototype是什么一种关系
Aug 06 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
详解Vue.js分发之作用域槽
Jun 13 Javascript
vue中如何创建多个ueditor实例教程
Nov 14 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 jQuery
详解react组件通讯方式(多种)
May 06 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
跟老齐学Python之集合的关系
2014/09/24 Python
Python访问纯真IP数据库脚本分享
2015/06/29 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
Biblibili视频投稿接口分析并以Python实现自动投稿功能
2021/02/05 Python
台湾家适得:Homeget
2019/02/11 全球购物
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Linux面试题LINUX系统类
2015/11/25 面试题
心理学专业毕业生推荐信范文
2013/11/21 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
翻译学院毕业生自荐书
2014/02/02 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
MySQL 亿级数据导入导出及迁移笔记
2021/06/18 MySQL
Ajax实现异步加载数据
2021/11/17 Javascript