帮助Scroll / Follow Sidebar [英] Help with Scroll/Follow Sidebar

问题描述

使用jquery技术从css-tricks.com有一个滚动/跟随侧边栏，这里是代码，如果你不知道什么im谈论：

used the jquery technique to have a scrolling/following sidebar from css-tricks.com, here is the code if you dont know what im talking about:

$(function() {

        var $sidebar   = $("#scroll-menu"),
            $window    = $(window),
            offset     = $sidebar.offset(),
            topPadding = 15;

        $window.scroll(function() {
            if ($window.scrollTop() > offset.top) {
                $sidebar.stop().animate({
                    marginTop: $window.scrollTop() - offset.top + topPadding
                });
            } else {
                $sidebar.stop().animate({
                    marginTop: 0
                });
            }
        });

    });

这里也是链接 http://css-tricks.com/scrollfollow-sidebar/

我唯一的问题这是它有一个容器，但当你滚动足够远到页脚边栏滚动容器。

The only problem that i have with this is that it has an container but when you scroll far enough into footer the sidebar scrolls out of container. Is there a way i can constrain how far it scrolls down?

这是一个发生了什么的图片：
http://tinypic.com/r/2mcj2mv/7

Here is an image of what is happening: http://tinypic.com/r/2mcj2mv/7

感谢

推荐答案

您只需要添加一个额外的条件语句，如果 $（window）。 scrollTop（）大于某个阈值。问题在于设置阈值，我假设你想要在不同高度的页面上工作。幸运的是，我们可以使用页脚的偏移量和边栏的高度来确定这个阈值。以下可能需要对您的特定情况进行一些调整，但基本上：

You just need to add an extra conditional statement that does nothing if $(window).scrollTop() is greater than a certain threshold. The problem lies in setting that threshold as I assume you want it to work on pages of varying heights. Fortunately we can use the offset of the footer and the height of the sidebar to determine this threshold. The following might need some tweaking for your particular situation, but basically:

$(function() {

    var $sidebar   = $("#scroll-menu"),
        $window    = $(window),
        $footer    = $("#footer"), // use your footer ID here
        offset     = $sidebar.offset(),
        foffset    = $footer.offset(),
        threshold  = foffset.top - $sidebar.height(); // may need to tweak
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > threshold) {
            $sidebar.stop().animate({
                marginTop: threshold
            });
        } else if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

这篇关于帮助Scroll / Follow Sidebar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！