Question

我目前正在使用以下内容：

要使我的侧边栏按下页面。我有一个很大的页脚，我希望div在它到达页脚时停止而不是继续滚动。

我目前的代码是：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

Answer 1

您可以检查是否已向下滚动到页脚，然后删除stick类：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    if (window_top + div_height > footer_top)
        $('#sticky').removeClass('stick');    
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
    }
}

（你可以结合if删除重复的.removeClass，这里用于演示）

然而，随着你的CSS，你会得到一个令人讨厌的跳跃＆＃39;当你开始滚动时 - 在你的小提琴中，正确的内容出现在#sticky下面，然后当你坚持#sticky时，正确的内容会跳跃以填补空白。使用上面的代码，你会得到一些竞争条件，因为当它填补/填补缺口时，offset（）就会移动。

要解决此问题，只需在您的#sticky css中添加float:left。

更新了小提琴：http://jsfiddle.net/0mLzseby/472/

我怀疑你想更进一步，当你到达底部时，div然后开始滚动页面。您可以通过调整“固定”位置来实现此目的。 .stick的顶部。不要在页脚下方忘记重置它：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding)
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
    else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

填充只是让它在一个更自然的地方开始滚动 - 你可以从其他css属性中获取它，例如其他组件的边距和填充。

更新了小提琴：http://jsfiddle.net/0mLzseby/473/

Answer 2

你忘了添加课程，如果我们在页脚中，并刷新页面，那么侧栏就不会显示：

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();

    var padding = 20;  // tweak here or get from margins etc

    if (window_top + div_height > footer_top - padding) {
        $('#sticky').addClass('stick'); //////// here is to get fixed when we refrech page when we are in the footer
        $('#sticky').css({top: (window_top + div_height - footer_top + padding) * -1})
}     else if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky').css({top: 0})
    } else {
        $('#sticky').removeClass('stick');
    }
}

Answer 3

您无需为此使用javascript。您只能使用CSS来做到这一点：

position: sticky;

body{
  padding: 0 20px;
}
#content {
  height: 1200px;
}
header {
  width: 100%;
  height: 150px;
  background: #aaa;
}
main {
  float: left;
  width: 65%;
  height: 100%;
  background: #444;
}
aside {
  float: right;
  width: 30%;
  height: 500px;
  position: sticky;
  top: 100px;
  background: #777;
}
footer {
  width: 100%;
  height: 300px;
  background: #555;
}

<body>
  <header>Header</header>
  <div id="content">
    <main>Content</main>
    <aside>Sidebar</aside>
  </div>
  <footer>Footer</footer>
</body>

Answer 4

您可以检查是否向下滚动添加了粘性类，并且当您在页脚和页眉区域滚动时，将其删除了粘性类

    kSessionRules.getAgenda().getAgendaGroup("Group 1").setFocus();
    kSessionRules.fireAllRules();
    kSessionRules.update(tcHandle, tc); //tc is the object inserted in working memory, the FactHandle is the return value from the *insert* call
    kSessionRules.getAgenda().getAgendaGroup("Group 2").setFocus();
    kSessionRules.fireAllRules();

Answer 5

现在无需使用position: sticky就可以使用javascript来实现。

更新的小提琴：http://jsfiddle.net/p1gku0mx/3/

关键是将粘性元素包装在另一个div中。由于粘性元素不能移到其包装div的外部，因此在页脚出现时它会向上滚动。

使滚动侧边栏停在页脚

5 个答案: