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

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

你可以放置相同的停止并重新定位在底部，就像你在顶部一样。滚动到顶部时，它会重新定位。也可以尝试使用页脚。

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

3 个答案: