通过JS固定位置侧边栏

Question

我有这个侧边栏，它的位置是通过 JS 设置的。基本上，它必须在页面滚动时保持原位，但是，当它到达容器的末尾时，它就会消失。我怎样才能保留（固定的）div，这样它就不会离开容器？ 我将在这里发布代码和一张图片来更好地解释我在说什么。

示例：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