滚动过去时,使html元素保持原位

时间:2012-05-27 16:57:44

标签: javascript html css

在滚动到某个html元素之前,如何使其不被修复?因此,当用户滚动时,它将处于正常位置,但在用户滚过它后它不会离开屏幕?

3 个答案:

答案 0 :(得分:1)

将监听器附加到onscroll事件,如果scrollTop大于元素的Y位置,请将其设置为position: fixed

答案 1 :(得分:0)

我之前使用过这段代码:

http://www.webdeveloperjuice.com/2011/08/07/how-to-fix-element-position-after-some-scroll-using-jquery/

(function($){
        $.fn.scrollFixed = function(params){
        params = $.extend( {appearAfterDiv: 0, hideBeforeDiv: 0}, params);
        var element = $(this);

        if(params.appearAfterDiv)
            var distanceTop = element.offset().top + $(params.appearAfterDiv).outerHeight(true) + element.outerHeight(true);
        else
            var distanceTop = element.offset().top;

        if(params.hideBeforeDiv)
            var bottom = $(params.hideBeforeDiv).offset().top - element.outerHeight(true) - 10;
        else
            var bottom = 200000;                

            $(window).scroll(function(){    
                if( $(window).scrollTop() > distanceTop && $(window).scrollTop() < bottom )         
                    element.css({'position':'fixed', 'top':'5px'});
                else
                    element.css({'position':'static'});             
            });           
        };
    })(jQuery);

然后只需调用元素:

$(document).ready( function(){
$("#scrollingDiv").scrollFixed({appearAfterDiv:'.sidebar p', hideBeforeDiv:'.footer'});
$("#scrollingDiv1").scrollFixed({hideBeforeDiv:'.footer'});
});

答案 2 :(得分:0)

查看jQuery Scrollfollow plugin。我用它来方便地达到这个效果。

您只需在要保留的元素上调用它:

<script type="text/javascript">
        $( '#example' ).scrollFollow();
</script>

可以配置缓动,位置和其他参数。