jQuery始终显示(随页面滚动)的内容

JS or jQuery, 转自点点 12 年前 回复

, , ,

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/

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)