粘性侧边栏与粘性导航栏

Question

I am trying to make a layout that has the following desired behaviour:

The red bar indicates where I want the sidebar to "stick". Currently I have a header and when the page scrolls the nav bar below it sticks to the top of the page. Then the header and the sidebar continue scrolling. When the sidebar is at the end of the length it sticks at the bottom. Then when the main content (consisting of individual posts) is at the end the footer comes and "pushes" the bottom of the sidebar up.

Then when scrolling back up, the same happens in reverse (preferably with the sidebar scrolling up until the top of it is in view and then sticks to the top below the navbar).

Currently I have almost all of the desired behaviour by using the sticky-kit plugin, but I can't make it so that the sidebar sticks to just below the navbar instead of the top.

A link can be found here if needed.

Current 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);
    }
});

Markup

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

Answer 1

Solved the problem by using the plugin's offset_top option. It didn't work initially when I had $("#aside, #posts").stick_in_parent(); but when I changed it to $("#aside").stick_in_parent(); it worked.