如何将高度大于视点的定位差贴在身体上

Question

我知道div的定位(固定的、绝对的和相对的)。我可以附加一个固定的div到身体，这样它将坚持到相同的位置，而滚动身体。在这里，我提出了一个有点不同的问题。

我有一个侧边栏，高度高于视口高度，我希望它被固定在身体上。在滚动身体的同时，它也应该滚动，但一旦底部的固定div可见，它就不应该随着身体滚动。

例如，Facebook墙的右侧侧边栏与body一起滚动，并在右侧侧边栏底部可见(固定)后停止与body一起滚动。

Answer 1

这是可能的，通过放置您的侧边栏绝对，并更改为固定的一次窗口滚动位置通过底部。

CSS：

#sidebar {
    height: 120%;
    width: 100px;
    border: 2px solid blue;
    padding: 20px;
    margin: 20px;
    position: absolute;
    top: 0;
}

jQuery：

$(document).ready(function() {
    var bottomPos = $('#sidebar').outerHeight(true) - $(window).height();
    $(window).scroll( function() {
        if ( $(window).scrollTop() > bottomPos ) {
            $('#sidebar').css({'position':'fixed','top':'auto','bottom':'0px'});
        } else {
            $('#sidebar').css({'position':'absolute','top':'0px'});
        }
    });
});

和演示。

Answer 2

这里有三个针对预期任务的教程( google的第一个结果是查询：“固定侧边栏上的滚动”)

http://www.waypointarts.com/blog/2013/06/29/fixing-a-side-bar-while-scrolling-until-bottom

http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

http://css-tricks.com/scrollfollow-sidebar/

以下是其中一种方法的代码：

CSS

#page-wrap { 
  width: 600px; 
  margin: 15px auto; 
  position: relative; 
}

#sidebar { 
  width: 190px; 
  position: fixed; 
  margin-left: 410px; 
}

jQuery

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

Answer 3

以Facebook侧边栏为例，当浏览器垂直滚动到某个阈值(屏幕顶部与侧边栏中最后广告的顶部)时，它就会改变侧边栏上的类。

此时，它将css的位置设置为固定，并在-???px的侧边栏上设置一个顶部样式，使其在该阈值上没有移动，但当您向下滚动时，它将不再滚动。

您可以使用jquery scrollTop()函数检测特定元素的偏移量。http://api.jquery.com/scrollTop/