如何向下滚动页面，然后单击侧边栏的末端，使其粘在页面底部

Question

我正在尝试重现此侧边栏：

http://www.fastcodesign.com/3020546/innovation-by-design/would-steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st

看来您只是向下滚动页面，但是一旦到达侧边栏的底部（并且只要在主容器中仍有更多内容要显示），侧边栏就会停留在网页的底部，但是当您向上滚动时，侧栏也会向上滚动。

你怎么能重现这个？

干杯!

Answer 1

我的大部分回答都来自这个问题 。

这是带有sidebarAnchor的基本主体/补充工具栏布局，我们将在JavaScript / jQuery中使用它。

<div class="container">
  <div class="body">
  <!-- Body content -->
  </div>
  <div id="sidebarAnchor"></div>
  <div class="sidebar" id="sidebar">
  <!-- Sidebar Content -->
  </div>
</div>

CSS。 这里最重要的是我们将在jQuery中添加的.sticky类。 剩下的就是演示布局。

div.container {
    overflow: hidden;
    width: 100%;
}

div.body {
    width: 45%;
    float: left;
}

div.sidebar {
    width: 45%;
    float: right;
}

.stick {
    position: fixed;
    bottom: 0;
    right: 0;
}

还有jQuery / JS。 请参阅注释以获取解释。

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $sidebar = $('#sidebar'),
        $sidebarAnchor = $('#sidebarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $sidebarAnchor.offset().top;
        if (window_top > div_top) {
         // Make the div sticky.
         $sidebar.addClass('stick');
         $sidebarAnchor.height($sidebar.height());
        }
        else {
            // Unstick the div.
            $sidebar.removeClass('stick');
            $sidebarAnchor.height(0);
        }
    });
});

Answer 2

检查document.body.scrollTop + window.innerHeight是否大于或等于边栏高度：

http://jsbin.com/AjagUzi/1/edit?html,css,js，输出