javascript - 滚动布局 - 像 facebook 或 google 加右侧边栏

Question

知道如何制作像 google plus 或 facebook 这样的布局。您可以在 google plus home 上查看示例，

一开始，如果您在主要内容中滚动页面，它们会一起滚动（朋友帖子和侧边栏），但是当您滚动到侧边栏底部（在朋友帖子的右侧）时，侧边栏将停止滚动，但是另一个内容（朋友帖子）仍会滚动。可以向我解释如何制作这样的布局吗？示例代码或演示将非常有帮助。

Answer 1

使用 CSS 进行固定定位是一种非常有限的方法。有很多方法可以实现这种“固定”区域，其中许多已经在此处对类似问题的回答中给出（尝试上面的搜索？）。

一种技术（许多都基于）就是这样（简而言之）..

1. 捕获浏览器的滚动
2. 获取所选元素顶部的位置 (x)
3. 检查滚动是否> x，如果是，则将类应用于元素以将其固定到某个位置。

反过来也一样，例如：

var target = $('#div-to-stick');
var div_position = target.offset().top;

$(window).scroll(function() { 
    var y_position = $(window).scrollTop();
    if(y_position > div_position) {
        target.addClass('fixed');
    }
    else {
        target.removeClass('fixed');
    }
}

注意：根据您选择完成上述代码的方式，页面经常会随着 div 的位置被修改而“跳转”。这并不总是一个（明显的）问题，但您可以考虑通过使用 .before 和 target.height() 并附加一个具有相同高度的“假”替换 div 来解决这个问题。

希望这可以帮助。

Answer 2

css3 的新方法是减少你的工作量。使用单一属性来获取它。

position:sticky;

这是一篇解释它和演示的文章。

文章

演示

Answer 3

您正在寻找 CSS position:fixed（用于滚动侧边栏），您可以使用left:[length]、right:[length]、top:[length]和bottom:[length]正常的宽度和高度组合设置位置

您将需要在窗口滚动到侧边栏顶部后应用该属性的窗口resize和侦听器来扩充它。scrollposition:fixed

Answer 4

使用 css 属性（位置：固定）。即使您向下滚动或向上滚动，这也会保持 div 的位置固定。