Фиксированное положение Боковая панель через JS

Question

У меня есть эта боковая панель, позиция которой установлена ​​через JS. В принципе, он должен оставаться на месте, пока страница прокручивается, однако, когда она достигает конца контейнера, он отключается. Как я могу сохранить (фиксированный) div, чтобы он не покидал контейнер? Я отправлю код здесь и изображение, чтобы лучше объяснить, о чем я говорю.

Пример: http://www.cosmosgraphicdesign.com/portfolio/work.html?featured

Markup:

<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