Javascript jQuery/Angular-Sticky边栏不考虑相应div（？）的完整高度

说到点子上

请展开Plunkr上的视图窗口进行检查。

有一个div，它有一个名为

.border

的类，这个类给出了红色边框，如果你看到这个例子，你可以向下滚动，然后窗口会增加他的大小，直到我决定这样做，才发生这种情况。现在你可以滚动窗口了，正如我之前提到的，它只是在增加它的大小

此外，我无法为包含红色边框的div设置固定大小，因为有时该大小会根据正在加载的数据动态变化

我想要的是，粘性侧边栏不要超出红色边框

这是jQuery代码，我很确定这就是我失败的地方：

$(function() {
  var offset = $("#sidebar").offset();
  var topPadding = 85;
  $(window).scroll(function() {
    if ($(window).scrollTop() > offset.top) {
      $("#sidebar").stop().animate({
        marginTop: $(window).scrollTop() - offset.top + topPadding
      });
    } else {
      $("#sidebar").stop().animate({
        marginTop: 50
      });
    }
  });
});

我也在做同样的事情，但是对于AngularJS，情况完全相同，您可以在这里检查AngularJS代码：

angular.module('myApp', [])
.directive('sticky', function($document, $timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      $timeout(function() {
        angular.element(document).ready(function() {
          var offset = element.offset(),
              topPadding = 55;
          $document.scroll(function() {

            if ($document.scrollTop() > offset.top) {
              console.log($document.scrollTop());
              console.log(offset.top);
              element.stop().animate({
                marginTop: $document.scrollTop() - offset.top + topPadding
              });
            } else {
              offset.top;
              element.stop().animate({
                marginTop: 0
              });
            }
          });
        });
      }, 350);
    }
  };
});

---

这有用吗@RonGilchrist实际上也有同样的行为，我想纠正的是，当你到达底部时，如果你再次向下滚动，任何事情都不会发生。我的朋友，你自己试试吧：在底部滚动，然后再继续，你会发现窗口的大小会增加，这就是我想要避免的。应该在单列模式下关闭该行为，是吗？此时，它不再是一个侧边栏，而是一个顶部栏。当我用plunk将页面区域调整到足够宽时，错误就不存在了。@RonGilchrist是的，但我需要纠正每个大小。