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

【问题标题】：Make html element stay in place when scrolled past滚动过去时使html元素保持原位
【发布时间】：2012-05-28 01:14:48
【问题描述】：

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

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

【讨论】：

window.onscroll 似乎不起作用。它只是在我加载页面时触发，而不是在我滚动时触发。

【解决方案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'});
});

【讨论】：

【解决方案3】：

看看jQuery Scrollfollow plugin。我已经使用它来方便地实现该效果。

您只需在要保留在视图中的元素上调用它：

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

可以配置缓动、位置等参数。

【讨论】：

我下载了那个 zip，但是代码什么也没做。我在 html 文件中添加了一个带有“src='jquery.scrollfollow.js'”的
请阅读插件使用说明：code.google.com/p/jquery-scroll-follow/wiki/Usage 它依赖于jQuery（哇）和jQueryUI Core。