粘滞侧边栏与粘性导航栏

Question

我正在尝试制作具有以下所需行为的布局：

红色条表示我希望侧边栏在哪里＆＃34;坚持＆＃34;。目前我有一个标题，当页面滚动下面的导航栏时，它会粘在页面顶部。然后标题和侧边栏继续滚动。当侧边栏位于长度的末端时，它会粘在底部。然后，当主要内容（由个别帖子组成）结束时，页脚会出现并且＆＃34;推动＆＃34;侧边栏的底部。

然后当向上滚动时，反向发生同样的事情（最好是侧边栏向上滚动，直到它的顶部在视图中，然后粘在导航栏下方的顶部）。

目前我通过使用sticky-kit插件获得了几乎所有所需的行为，但我无法做到这一点，以便侧边栏位于导航栏的下方，而不是顶部。

如果需要，可以找到here链接。

当前的jQuery：

$(document).ready(function(){
    $('nav').clone().addClass('scroll').prependTo('#wrapper');
    $("#aside").stick_in_parent();
});
var nav = $("nav");
var pos = nav.position();                    
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos >= pos.top) {
        $('nav.scroll').fadeIn(0);
    } else {
        $('nav.scroll').fadeOut(0);
    }
});

标记

<div id="wrapper">
    <header></header>
    <nav></nav>
    <div id="aside"></div>
    <div id="posts"></div>
</div>

Answer 1

使用插件的offset_top选项解决了问题。当我$("#aside, #posts").stick_in_parent();时，它最初没有用，但是当我将其更改为$("#aside").stick_in_parent();时，它就有用了。