Question

我正在尝试创建一个包含主要内容区域和侧边栏的网站，类似Stack Overflow上的内容。目标是当您向下滚动时，侧边栏保持可见。

我已经看到了两种方法：

position:fixed;
使用DOM进行JavaScript操作

接近没有。 1，据我所知，当视口小于侧边栏内容时会出现问题所以我想这是不能可靠使用的，我见过的JavaScript脚本通常是动画的或者通常是“慢”的（你可以看到）每次滚动后都会重新绘制。）

有人可以指出一个不受上述问题困扰的JavScript库/ CSS方法吗？

修改：一个示例是this page 但是，侧边栏在没有动画的情况下贴在顶部，并且当侧边栏高于时，正确处理情况内容/视口。

Answer 1

我不喜欢沉重的JS解决方案，所以要问的重要的是 - 首选兼容性。在IE8 +中，可以代替

var $window = $(window),
    $sidebar = $(sidebar);

$window.on('resize', function(){
    $sidebar.height($window.innerHeight());
});

$window.resize();

做这样的事情（纯CSS解决方案）：

#sidebar {
    position: fixed;
    left: 0; /* or right */
    top: 0;
    bottom: 0;
    overflow: auto;
}

当您同时拥有顶部和底部/左侧和右侧的值时，框将被拉伸。（JSFiddle demo）

Answer 2

知道了。它是基于Javascript的，但我确定没有什么重要的，甚至IE8应该解决它很好。

var top = $('#sidebar').offset().top;
var height = $('#sidebar').height();
var winHeight = $(window).height();
var gap = 10;
$(window).scroll(function(event) {
    var scrollTop = $(this).scrollTop();

    // sidebar reached the (end - viewport height)
    if (scrollTop + winHeight >= top + height + gap) {
        // if so, fix the sidebar and make sure that offset().top will not give us results which would cancel the fixation
        $('#sidebar').addClass('fixed').css('top', winHeight - height - gap + 'px');
    } else {
        // otherwise remove it
        $('#sidebar').removeClass('fixed').css('top', '0px');
    }
});

demo

Answer 3

您可以抓住客户端窗口的高度并将其提供给您的侧边栏：

var sidebarHeight = $(window).innerHeight();

$('#sidebar').css('height',sidebarHeight);

使用适用于侧边栏的CSS：

#sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
    overflow: hidden;
}

Here is a working JSFiddle.

您还可以观察窗口调整大小，以避免在调整大小时出现混乱:) Here is the way to go with jQuery

祝你好运

Answer 4

不确定你是否已经弄清楚但我已经创建了一个包含粘性侧边栏jQuery插件。它非常简单，只需一行jQuery即可调用。看看这里：http://mojotech.github.com/stickymojo/

从位置开始：固定;然后使用javascript来处理任何调整大小，滚动甚至允许您指定它不应该相交的页脚元素。通过组合这些方法，您将获得一个平滑的固定元素。另外，我们为您提供了便利。

Answer 5

此处的代码和演示：http://closure-library.googlecode.com/svn/docs/class_goog_ui_ScrollFloater.html

如何在CSS / JS中创建固定/粘性侧边栏？

5 个答案: