原生javascript写的侧栏跟随效果
2024-10-10 05:15:58
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”。这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。
侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在NEOEASE写的一篇文章中介绍的很清楚,一种是借助jQuery来实现,这种方法对于那些平时不需要加载jQuery库的网站来说,显然是一种负担(jQuery现在是越做越大了……)。另外一种方法是通过原生javascript编写的效果,这种方法相比上一种,要轻盈得多。但是,我还是不够满足,原生的javascript写的文件也有4K多,对于我这种至简至上的人来说,还是太繁杂了。那么有没有更简单的实现办法呢?
答案当然是肯定的。下面具体介绍。
先说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:;z-index:;}
最后是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,大功告成,够简单吧。
最新文章
- win7安装virtualbox遇到的问题
- 通过IP获得IP所在地的三个接口
- The Economist
- [搜片神器]之DHT网络爬虫的代码实现方法
- boost序列化
- Ognl表达式语言
- 第16章 网络IPC:套接字总结
- NSString截取文件名(很笨的方法)
- UVA 1622 Robot
- Pyhon之Django中的Form组件
- Centos 7 关闭selinux and firewall
- 【XSY2701】异或图 线性基 容斥原理
- micrometer自定义metrics
- Spring Data Jpa 使用@Query标注自定义查询语句
- 【转】ibatis 中isNull, isNotNull与isEmpty, isNotEmpty区别
- 五句话搞定JavaScript作用域【转】
- css可应用的渐进增强新特性
- SparkStreaming程序设计
- 关于dedecms数据量大以后生成目录缓慢的问题解决
- js 的一些兼容性写法
热门文章
- unity3d ppsspp模拟器中的post processing shader在unity中使用
- Android客户端调用Asp.net的WebService
- mapreduce 倒排索引的建立
- NDK的安装和下载
- C++之拷贝构造函数
- JavaScript高级程序设计15.pdf
- [转载]jquery的extend和fn.extend
- [zz]android的logcat详细用法
- Ural 1046 Geometrical Dreams(解方程+计算几何)
- poj 1218 THE DRUNK JAILER【水题】