固定浮动元素在页脚处停止

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
来自同一篇文章“Fiding-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);
            }


        });

这对我很有帮助，我希望其他人也会发现它有帮助:)
我已经在我的网站上实现了它，以便用户可以获得完整文章视图

Answer 3

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

您可以在底部设置与顶部相同的止损并重新定位。当您滚动到顶部时，它会重新定位自己。页脚也尝试一下。