用jquery设定始终显示（随页面滚动）的元素

标题比较让人费解，大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是，当然有时候，效果会更好一些，比如一般时候固定在某处，页面滚动使这个元素滚出显示边界之后，为了方便读者（或者展示广告），就把这个模块变成随页面滚动的。测试了一下效果还不错（当然 IE6去死）。
很久没写过代码分享文章了。这里先说一下方法：获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。这里借zww大叔个图，如下（当然大叔不是这么弄的，不过效果类似）：

下面是代码：

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14	`var scroller_anchor = jQuery(".scroller").offset().top;` `jQuery(window).scroll(function() {` `if` `(jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') !=` `'fixed') {` `jQuery('.scroller').css({` `'position'`: `'fixed',` `'margin-top'`: `'0'` `});` `}` `else` `if` `(jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') !=` `'relative') {` `jQuery(".scroller").css({` `'margin-top'`: `'10px',` `'position'`: `'relative'` `});` `}` `});`

但是，有时候这样的方式会有问题，比如元素A上面有动态增长（缩短）的元素（比如突然js写入了一个东东），这样第一次获取的高度就不再合适。这样就需要设定一个锚点（这里设定为class id为scroller_anchor的div元素）（经zww大叔提醒将class改为ID）。代码如下：

双击代码全选
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	`jQuery(window).scroll(function() {` `if(jQuery("#content").find("#scroller_anchor").length > 0){` `var scroller_anchor = jQuery("#scroller_anchor").offset().top;` `if` `(jQuery(this).scrollTop() >= scroller_anchor && jQuery('.scroller').css('position') !=` `'fixed') {` `jQuery('.scroller').css({` `'position'`: `'fixed',` `'margin-top'`: `'0'` `});` `jQuery("#scroller_anchor").css('height',` `'36px');` `}` `else` `if` `(jQuery(this).scrollTop() < scroller_anchor && jQuery('.scroller').css('position') !=` `'relative') {` `jQuery("#scroller_anchor").css('height',` `'0px');` `jQuery(".scroller").css({` `'margin-top'`: `'10px',` `'position'`: `'relative'` `});` `}` `}` `});`

上面用到的完整的html代码如下：

双击代码全选
1 2 3 4 5 6	`<div` `id="main-content">` `<div` `id="scroller_anchor"` `style="height: 0px; "></div>` `<div` `class="scroller">` `......` `</div>` `</div>`

至于具体的css，请自己根据需要设定吧。
文章来源：Axiu’s blog