Question

我计划像边栏一样重新创建Medium.com。这就是我现在所拥有的，但它远未结束。

打开下面的JSFiddle以更好地理解;我希望做到以下几点：

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

我该如何解决这个问题？我知道有粘性套件可以完成这项工作，但是我无法使用任何插件。

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。

关于你的问题：

由于元素不是页面的整个长度而导致突然粘到底部，因此将其粘贴到底部并固定位置将导致它跳到那里。然而，随着我所做的改变，它坚持顶部，不会有这种跳跃，因为滚动时元素位于屏幕的顶部，因此可以谨慎地固定在那里。
这是因为元素没有固定的width，设置position: fixed;意味着元素宽度不再由父级设置，而是由视图端口设置。因此，它会扩展以填充视图端口中的所有宽度。
发生这种情况是因为在向上滚动元素原始位置时从未删除position: fixed;，现在Js中更新的if语句在滚动到原始位置之上时会删除带有position: fixed;的类。 / LI>
更详细地了解我的变化。

我添加了一个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。

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

1 个答案: