post

浮动层滚动固定在浏览器顶部

最早在Gmail中看到过这种效果,就是滚动条往下滚动的时候,到达临界值,Gmail的菜单就会固定在浏览器的顶部,可以很方便的操作邮件,后来在淘宝的宝贝详情页面、6月促销活动等都能看到这样的效果,方便又实用。

博客换新主题有一段时间了,经常感觉右侧空白的地方较大,于是就想到利用这一效果;

在Google上搜到了我想要的代码,简洁又能满足功能,经过测试还是会出现重叠问题,不适用我的主题。

效果可以参照月光博客:http://www.williamlong.info/archives/3083.html

代码如下:

[javascript collapse=”false”]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(function(){
var obj=$("#text-13");//#text-13为博客中广告模块的ID,也可以用类选择器 $(".class")[0]
var navH = obj.offset().top; //获取要定位元素距离浏览器顶部的距离
//滚动条事件
$(window).scroll(function(){
var scroH = $(this).scrollTop(); //获取滚动条的滑动距离
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
obj.css({"position":"fixed","top":50}); //top值因不同主题而定,也可以固定其他元素
}else if(scroH<navH){
obj.css({"position":"static"});
}
})
});
// ]]></script>
[/javascript]

Comments

  1. 这个功能好啊,不知道我那主题能否调试出来。。。

  2. 这个功能好啊,不知道我那主题能否调试出来。。。

  3. 蜗牛前来支持~~~~~~~

  4. 蜗牛前来支持~~~~~~~

山姆进行回复 取消回复

*

· 1,454 次浏览