Question

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

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

Answer 1

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

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

捕获浏览器的滚动
从所选元素（x）的顶部获取位置
检查滚动是否＆gt; 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的位置被修改时“跳转”。这并不总是一个（明显的）问题，但你可以考虑通过使用带有target.height（）的.before并附加一个具有相同高度的“假”替换div来解决这个问题。

希望这有帮助。

Answer 2

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

position:sticky;

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

article

Demo

Answer 3

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

您需要使用窗口bottom:[length]和resize侦听器对其进行扩充，该窗口在窗口滚动到侧边栏顶部后应用scroll属性。

Answer 4

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

滚动布局 - 如Facebook或谷歌加右侧边栏

4 个答案: