Archives for 8月 2012

最早在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]