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始终显示(随页面滚动)的内容
发表评论