如何停止“;固定的“;元素，使用以下代码

对于我当前的项目，我想在DOM中创建一种固定元素。我不使用position: fixed，因为元素将失去其在DOM中的存在，从而失去其原始位置（在我看来，这只会让事情看起来更糟）。每当用户滚动并且我使用的代码在JavaScript中成为可能时，我只需在可滚动元素中添加/删除margin-top: somevalue，就可以使元素表现得像一个固定元素。使用这种方法还为整个"交互"添加了一个好看的动画。

我遇到的问题是，当（浏览器）窗口的高度很小，元素会到达页脚时，它会展开容器、主体或上面的任何父对象。我该如何防止这种情况发生？

我为这个问题的每个例子做了一个JSFiddle。

$(document).ready(function() {
  var topPadding = 10;
  //Set the scrollable offset before starting the scroll
  var scrollableTopOffset = $(".scrollable").offset().top;
  $(window).scroll(function() {
    /* When scrolling, determine wether the browser window still contains
		scrollable: */
    if (scrollableTopOffset < $(window).scrollTop()) {
      //Code when scrollable is within the browser window...
      //$(".shopping-cart").addClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: $(window).scrollTop() - scrollableTopOffset + topPadding
      });
    } else {
      //Code when scrollable is not within the browser window...
      //$(".shopping-cart").removeClass("scrollable-fixed");
      $(".scrollable").stop().animate({
        marginTop: 0
      });
    }
  });
});

.some-content-block {
  height: 150px;
  margin-bottom: 5px;
  background-color: red;
}
.scrollable {
  height: 75px;
  background-color: cyan;
}
footer {
  height: 200px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="background-color: blue;">
  <div class="row">
    <div class="col-md-12">
      <div class="some-content-block">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10 col-sm-10 col-md-10">
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
      <div class="col-md-4">
        <div class="some-content-block">
        </div>
      </div>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2">
      <div class="scrollable">
      </div>
    </div>
  </div>
</div>
<footer></footer>

编辑：这是我用SamGhatak的答案更新的小提琴：JSFiddle