Question

如何使html元素在滚动到某个位置之前不会固定？因此，当用户滚动时，它将处于正常位置，但在用户滚动过去后，它不会离开屏幕？

Answer 1

将一个监听器附加到onscroll事件，如果scrollTop>大于元素的Y位置，则将其设置为position:fixed

Answer 2

我以前用过这段代码：

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 });
});

Answer 3

请查看 jQuery Scrollfollow插件。我使用它来方便地实现这种效果。

您只需在您想要查看的元素上调用它：

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

可以配置放松、位置和其他参数。

友情链接