javascript - Sticky Bootstrap 列应该以 parent/content 结尾

Question

我见过这个问题的各种形式，但没有什么能真正帮助我解决部分粘性侧边栏/Bootstrap 列行为。让我从问题本身开始。

我的页面顶部附近有一张大图片。由于页面复杂，我使用的是 Bootstrap 列网格。图像跨越，比如说，10 列，我在左侧留下了属于同一行的 2 列来存储侧边栏。这也让我可以垂直对齐图像旁边的边栏。

现在，侧边栏(现在是 Bootstrap 列)应该会变粘，并且在滚动条经过后应保持与视口(viewport)垂直对齐。你可以在fiddle中看到它有点“跳跃”而不是平稳过渡。

另一个问题是粘性元素/列应该只在其父/容器可见时保持粘性。这意味着它应该过渡/相对于该容器的末端。现在我只能设法让它粘到页面末尾。它应该停在红线上方(如 fiddle 所示)。

到目前为止，这是我的 jQuery 逻辑。

$(document).ready(function(){
  $(window).scroll(function(){
    var elem = $("#refScroller").offset().top - ($("#refScroller").height() / 2);
    var windowvalue = $(window).scrollTop();

    if (elem <= windowvalue) {
      $("#wannabeSticky").addClass("sticky");
    }
    else {
      $("#wannabeSticky").removeClass("sticky");
    }
  });
});

我真的很感激一些想法和提示，因为这已经困扰了我两天。如果可能的话，我很乐意保留 Bootstrap 网格结构，但请随时提出任何建议，即使是那些将侧边栏描述为纯绝对 div 的人，只要粘性有效。

提前致谢!

编辑:我知道已经有类似的问题了here ，但似乎我无法使 JS 逻辑适用于我的情况。

Answer 1

所以，又花了一天时间，我似乎找到了一个不错的 jQuery 版本来完成工作。有我更新的 fiddle .

$(document).ready(function(){
  var passedMobileNavi = false;

  function stickySocialNavi(reference, valueExtracted) {
    var refTop = $(reference).offset().top - valueExtracted;
    var scrollTop = $(window).scrollTop();
    return (refTop <= scrollTop);
  }

  $(window).scroll(function() {
    if (stickySocialNavi($("#refScroller"), $("#refScroller").height())) {
      if (!passedMobileNavi) {
        passedMobileNavi = true;
        $("#wannabeSticky").addClass("sticky");
      }
    }
    else {
      passedMobileNavi = false;
      $("#wannabeSticky").removeClass("sticky");
    }

    if (stickySocialNavi($("#end"), $(window).height())) {
      var var1 = $(window).scrollTop(),
      var2 = $("#end").offset().top,
      var3 = $(window).height();
      var calculateOffset = (var2 - var3) - var1;
      $("#wannabeSticky").css("top", "calc(50% + " + calculateOffset + "px)");
    }
    else {
      $("#wannabeSticky").css("top", "50%");
    }
  });
});

为了开始粘性，我采用了引用点(即紧挨着它的非移动元素)及其高度。只要滚动条越过引用点的中心，粘性元素就会获得固定位置。

由于 stick 元素居中，当到达其容器的末端时，它会获得额外的顶部偏移值。它仍然是固定的，但它的 top 属性的值采用滚动差异，因此慢慢地将它描绘到容器的末端。

我不知道这是否是最优雅、最直接或最易于实现/理解的解决方案，但它对我有用。