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代码如下:
<div id="main-content">
<div id="scroller_anchor" style="height: 0px; "></div>
<div class="scroller">
......
</div>
</div>
至于具体的css,请自己根据需要设定吧。
转自http://axiu.me/learning_notes/fixed_block/
声明:本文采用 BY-NC-SA 协议进行授权,如无注明均为原创,转载请注明转自 你好!刘
本文地址:jQuery始终显示(随页面滚动)的内容
本文地址:jQuery始终显示(随页面滚动)的内容
发表评论