原生javascript写的侧栏跟随效果
浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”。这种特效对提高网站浏览量、文章点击率、广告点击量都有一定效果。
侧栏跟随滚动的实现方法有很多种,比较常见的有两种,这两种方法在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,大功告成,够简单吧。
原生javascript写的侧栏跟随效果的更多相关文章
- 原生JavaScript写AJAX
前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...
- 原生javascript写自己的运动库(匀速运动篇)
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...
- 用原生JavaScript写AJAX
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 用原生javascript写出jquery中slideUp和slideDown效果
设置块级元素的CSS属性overflow为hidden,然后动态改变height即可 var header=document.getElementsByTagName('header')[0]; he ...
- 原生JavaScript 全特效微博发布面板效果实现
javaScript实现微博发布面板效果.---转载白超华 采用的js知识有: 正则表达式区分中英文字节.随机数生成等函数 淡入淡出.缓冲运动.闪动等动画函数 onfocus.onblur.oninp ...
- 原生javascript实现网页显示日期时钟效果
刚接触javascript中Date内置对象时,以为这些方法都太简单了,结果要自己实际操作写一个时钟效果还真一时把我难住了,主要有几点大家要注意的.先看实际效果 要实现这样的效果 某年某月某日星期几几 ...
- 教你用原生CSS写炫酷页面切换效果,跟第三方组件说拜拜
因为项目需要,别人想让我给他写一个个人博客,并且给了我一个其他人的网页,可以点此查看.有的同学可能说了,第三方博客框架这么多,为什么还要去手写的,你说这个有可能是没有看到打开这个博客. 样式介绍 给大 ...
- 原生JavaScript+CSS3实现移动端滑块效果
在做web页面时,无论PC端还是移动端,我们会遇到滑块这样的效果,可能我们往往会想着去网上找插件,其实这个效果非常的简单,插件代码的的代码往往过于臃肿,不如自己动手,自给自足.首先看一下效果图: 分析 ...
- 原生JavaScript写select下拉选择后跳转页面
<select name="molsel_oprate" onchange="javascript:var obj = event.target; var inde ...
随机推荐
- 折腾iPhone的生活——AirDrop的使用
AirDrop是iOS一个非常大的亮点,其实说是这么说了,但是事实上AirDrop并没有想象中那么好用. AirDrop就是一个用于无线传输文件的方式,实质性跟蓝牙没有太大区别,但是比蓝牙好用,有点像 ...
- ADO数据库链接
一.数据库操作准备 // --------------------------------------------------------------------------------------- ...
- java 检查是否是数组 检查是否是空数组 检查数组是否包含某个元素
/** * Determine whether the given object is an array: * either an Object array or a primitive array. ...
- windows 下文件上传到fastdfs
php.ini 配置 [fastdfs]; the base pathfastdfs_client.base_path = D:/tmp ; connect timeout in seconds; d ...
- 某外企mono for android试题
Hitcents C#Programming Test This test is designed to evaluate generalC# and Xamarin development skil ...
- B和B+树学习笔记
二叉树 如果数据都在内存中,我们就用平衡二叉查找树即可,这样效率最高. 在前面的文章中我使用过红黑树(大致平衡的二叉查找树),500万节点时,搜索的深度可以达到50,也就是需要50次指针操作才能获取到 ...
- Spring三 Bean的三种创建方式
创建Bean的三种方式在大多数情况下,Spring容器直接通过new关键字调用构造器来创建Bean实例,而class属性指定Bean实例的实现类,但这不是实例化Bean的唯一方法.实际上,Spring ...
- Linux内核之mmc子系统-sdio
现在的Linux内核中,mmc不仅是一个驱动,而是一个子系统.这里通过分析Linux3.2.0内核,结合TI的arm335x平台及omap_hsmmcd host分析下mmc子系统,重点关注sdio及 ...
- Lucene IndexReader,IndexWriter,IndexSearcher 缓存应用
1.IndexManager类,用于提供IndexReader,IndexWriter,IndexSearcher获取接口 import java.io.File; import java.io.IO ...
- android开发之this.finish()的使用 分类: android 学习笔记 2015-07-18 19:05 30人阅读 评论(0) 收藏
在一个Activity用完之后应该将之finish掉,但是,之前在学校里自己摸索着开发时并没有太注意这个问题,因为activity无论是否finish掉对功能的影响貌似都不是那么明显(这是读书时候的观 ...