0

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

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

似乎您只是向下滚动页面，但是一旦您到达侧边栏的底部（并且只要在主容器中还有更多内容要显示），侧边栏就会粘在网页的底部，但是当您向上滚动时，侧栏会向上滚动..

你怎么能重现这个？

干杯!

4

2 回答 2

3

我的大部分答案都是从这个问题中借来的。

这是一个基本的 body/sidebar 布局，带有 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);
        }
    });
});
于 2013-10-28T15:08:32.683 回答
0

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

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

于 2013-10-28T15:09:17.397 回答