固定位置边栏通过JS

Question

我有这个边栏，哪个位置是通过JS设置的。基本上，它必须在页面滚动时保持原位，但是，当它到达容器的末端时，它会熄灭。我怎样才能保持（固定）股利，所以它不会离开集装箱？ 我会在这里发布代码和一张图片来更好地解释我在说什么。

例子：http://www.cosmosgraphicdesign.com/portfolio/work.html?featured

标记：

<div class="container"> 
    <div id="sidebar"> 
     <!-- Sidebar Content --> 
    </div> 

    <div id="mainContent"> 
     <!-- Main Content --> 
    </div> 
</div> 

CSS：

#sidebar{ 
    position: absolute; 
    width: 350px; 
    padding-left: 10px; 
} 

JQuery的：

var mainContent; 
var navbarHeight = $(".navbar").height(); 
var sidebarHeight = $("#sidebar").height()/2; 

$(document).on("scroll", function(){ 
    mainContent = $(".work").scrollTop() + navbarHeight; 

    $("#sidebar").css("top", mainContent); 

    if(mainContent => $(".work").height()){ 
     mainContent = $(".work").scrollTop() + navbarHeight - sidebarHeight; 
     $("#sidebar").css("top", mainContent); 
    } 
}); 

Answer 1

这就是我试图解释：Image going off container

Answer 2

这里是原始的例子，我做了，如果我理解正确的问题：

var mainContentHeight = $("#mainContent").height(); 
    var mainContentTop = $("#mainContent").offset().top; 
    var sidebarHeight = $("#sidebar").height(); 
    var sidebar = $("#sidebar"); 

    $(document).on("scroll", function() { 
    //'stick' sidebar to the bottom of main block if we scroll 'too far' 
    if ($(window).scrollTop() + sidebarHeight > mainContentHeight + mainContentTop) { 
     sidebar.css({ 
     position: 'absolute', 
     top: mainContentHeight - sidebarHeight + mainContentTop 
     }); 
    } 
    //'stick' sidebar to the top of main block 
    else if ($(window).scrollTop() < mainContentTop) { 
     sidebar.css({ 
     position: 'absolute', 
     top: mainContentTop 
     }); 
    } 
    //fixed sidebar until it won't reach top or bottom of the main content block 
    else { 
     sidebar.css({ 
     position: 'fixed', 
     top: 0 
     }); 
    } 
    }); 

Example