滚动期间从底部粘贴侧边栏

Question

我打算重新创建 Medium.com 之类的侧边栏。这就是我现在所拥有的，但远未结束。

打开下面的 JSFiddle 可以更好地理解；我希望执行以下操作：

1. 当您向下滚动时，它突然卡在底部。如何让它在滚动时逐渐粘住？
2. 因为它使用position: fixed，所以它在不考虑布局的情况下向右侧移动。我该如何解决这个问题？
3. 当您向上滚动并且空间较小时，它会与标题重叠，如屏幕截图所示。同样，很可能是因为使用了 position: fixed。

我该如何解决这个问题？我知道有 Sticky-kit 可以工作，但我不能使用任何插件。

HTML：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      Header and Menu is placed here.
      <hr />
    </div>
    <div class="col-xs-8">
       <p>This is the main body which the user would be scrolling infinitely as more data gets loaded on scroll.</p>
    </div>
    <div class="col-xs-4">
      <div id="sidebar">
        <p>
          This is the sidebar which I want to stop when it reaches the bottom like the one shown in medium dot com
        </p>
      </div>
    </div>
  </div>
</div>

Javascript：

function scrollCheck() {
    var $right = $('#sidebar'),
        scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        docHeight = $(document).height(),
        rightHeight = $right.height(),
        distanceToTop = rightHeight - windowHeight,
        distanceToBottom = scrollTop + windowHeight - docHeight;
    if (scrollTop > distanceToTop) {

        $right.css({
            'position': 'fixed',
            'bottom': (scrollTop + windowHeight > docHeight ? distanceToBottom  + 'px' : '0px')
        });
    }
    else {
        $right.css({
            'position': 'relative',
            'bottom': 'auto'
        });
    }
}

$(window).bind('scroll', scrollCheck);

JSFIDDLE

Answer 1

我会回答你的问题。这是edited Fiddle first。

至于你的问题：

1. 突然粘到底部是因为元素不是页面的全长，所以在固定位置粘到底部会导致它跳到那里。而我所做的更改使其粘在顶部不会有这种跳跃，因为滚​​动时元素位于屏幕顶部，因此可以谨慎地固定在那里。
2. 这是因为元素没有固定的width，设置position: fixed;意味着元素宽度不再由父元素设置，而是由视口设置。因此它会扩展以填充视口中的所有宽度。
3. 之所以发生这种情况，是因为当滚动回元素原始位置上方时，position: fixed; 从未被移除，Js 中更新后的 if 语句现在会在滚动至原始位置上方时移除带有 position: fixed; 的类。

更详细地了解我所做的更改。

我添加了一个 CSS 类，以便使用 .toggleClass 使函数更简洁。

.docked-sidebar {
  position: fixed;
  top: 0;
}

我还更改了 if 语句的条件，以便它们起作用。使用.offset().top; 获取侧边栏和页面顶部之间的距离，同时删除大部分不需要的其他变量。最后我创建了 bool 变量(isDocked)，这样就不会多次触发相同的条件。

var $right = $('#sidebar'),
  isDocked = false,
  initOffsetTop = $right.offset().top;


function scrollCheck() {
  var scrollTop = $(window).scrollTop(),
    offsetTop = $right.offset().top;

  if (!isDocked && ((offsetTop - scrollTop) < 0)) {
    $right.toggleClass("docked-sidebar");
    isDocked = true;
  } else if (isDocked && scrollTop <= initOffsetTop) {
    $right.toggleClass("docked-sidebar");
    isDocked = false;
  }
}

为了像示例网站一样坚持底部然后再顶部，我建议检查this question。