用jquery设定始终显示（随页面滚动）的元素
标题比较让人费解，大概效果就是现在越来越多的看到网站里添加的随页面滚动的模块。比如我这里的头部就是，当然有时候，效果会更好一些，比如一般时候固定在某处，页面滚动使这个元素滚出显示边界之后，为了方便读者（或者展示广告），就把这个模块变成随页面滚动的。测试了一下效果还不错（当然IE6去死）。
很久没写过代码分享文章了。这里先说一下方法：获取元素（这里定位元素A）距离顶部的高度，接着设定scroll滚动的事件，比如超过那个高度，把A的位置设定为fixed，小于该高度，修改回relative。这里借 zww 大叔个图，如下（当然大叔不是这么弄的，不过效果类似）：
下面是代码。
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）。代码如下：
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代码如下：
......
至于具体的css，请自己根据需要设定吧。
转载请注明转自：用jquery设定始终显示（随页面滚动）的元素
杀你个发！话说为何你那个描点不用ID呢？听说效率比较高，哈。我那主题评论的效果用的是死方法，木有认真去学习。
@zwwooooo 是这样吗？那我改改，还真没注意过这个。借用了大叔的图也没打招呼，哈哈~~
@axiu 反正以前看过一些效率方面的东东，说优先#，然后是元素，排最后的是.，直接.不如先找父元素#再find，嗯嗯，好像是这样。我的图就不用打招呼了，没找我要广告费就不错了。
@zwwooooo 这么说来我果然是个只求效果，不求效率的人
@axiu 其实我们这些小网站不太需要注重效率，哈哈。
@zwwooooo CSS里面是优先#的
之前就看到这个效果了，一直不知道怎么实现
这不是zww大叔的那个东西嘛。
过来学习了，当时在大叔那里看了半天，最后默默的走过，原来是这样。
@loke 我说“类似”~~没说就是
根据响应式设计的要求，宽度设百分比比较好
@airoschou 哦哦~~受教了
这个只是会实现右侧sidebar里的模块跟随滑动，并不能实现类似zww那个滑动到最底下将评论框置于底部的效果吧？
@TekTea 是的，想置于底部自己改改
方法不错，看你评论框下面有个input-text，是忘记隐藏了？
@王叨叨 老实说，我也不知道那是个啥……
@axiu 难道是willin kan大师的那个ajax评论添加上的？
很清爽的模板
收藏，这个我暂时用不到
太好了，终于找到啦！
大哥，能把改成么？坑坏我了。
@S 你说的啥意思……