时间戳

首页 > 解决方案 > Sticky Bootstrap 列应以父/内容结尾

javascript - Sticky Bootstrap 列应以父/内容结尾

问题描述

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

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

现在，侧边栏，即现在的 Bootstrap 列，应该是粘性的，并且一旦滚动条经过，应该保持与视口垂直对齐。您可以在小提琴中看到它有点“跳跃”而不是平滑过渡。

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

到目前为止，这是我的 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 的人，只要粘性有效。

提前致谢！

编辑：我知道这里已经存在类似的问题，但似乎我无法让 JS 逻辑适用于我的情况。

标签： javascriptjquerytwitter-bootstrapcsssticky

解决方案

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

$(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 属性的值采用了滚动差异，因此慢慢地将它描绘到容器的末端。

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

推荐阅读