固定浮动元素在页脚停止

Question

我使用了http://jqueryfordesigners.com/fixed-floating-elements中的代码在滚动到某个点后浮动元素。这是我正在工作的网站：http://bodyecology.com/articles/gut-type-update

如您所见，滚动时右边的列变得固定，但在页脚处重叠。我怎样才能让它停在页脚上方呢？

当前正在使用：

<script>
    jQuery(document).ready(function () {  
    var top = jQuery('#news_sidebar').offset().top - parseFloat(jQuery('#news_sidebar').css('marginTop').replace(/auto/, 0));
    jQuery(window).scroll(function (event) {

        var y = jQuery(this).scrollTop();

        if (y >= top) {

        jQuery('#news_sidebar').addClass('fixed');

        } else {

       jQuery('#news_sidebar').removeClass('fixed');
    }
  });
 });
</script>

Answer 1

此小提琴实现了您想要的功能：

http://jsfiddle.net/ZczEt/9/

下面是处理右边浮动元素$('#summary')的javascript：

$('#summary').scrollToFixed({
    marginTop:
        $('.header').outerHeight() + 10,
    limit:
        $('.footer').offset().top -
        $('#summary').outerHeight() -
        10
});

下面是jquery插件及其源代码：

https://github.com/bigspotteddog/ScrollToFixed

Answer 2

我有和你一样的代码，让我的div从同样的文章“Fixing-Floating Elements”中浮点出来。

和你在页脚重叠时遇到的问题一样，对我来说唯一有效的解决方案(我是javascript newvie)就是用下面的代码把div从页脚中拉出来：

$(window).scroll(function () {

            // distance from top of footer to top of document
            footertotop = ($('#footer').position().top);
            // distance user has scrolled from top, adjusted to take in height of sidebar (570 pixels inc. padding)
            scrolltop = $(document).scrollTop() + 570;
            // difference between the two
            difference = scrolltop - footertotop;

            // if user has scrolled further than footer,
            // pull sidebar up using a negative margin

            if (scrolltop > footertotop) {

                $('#cart').css('margin-top', 0 - difference);
            }

            else {
                $('#cart').css('margin-top', 0);
            }


        });

这对我很有帮助，我希望其他人也会发现它有帮助:)我已经在我的网站上实现了它，这样用户就可以获得full articles view

Answer 3

我可能错了，但它似乎是右侧边栏中内容的大小。它是重叠的，因为它太大了，当你滚动到底部时，它不会重叠。

你可以把相同的停止和重新定位在底部，就像在顶部一样。当您滚动到顶部时，它会重新定位自己。在页脚也试一试。