javascript - 为什么水平滚动时出现固定的div？

Question

我已经在这个 fiddle 中演示了这个问题:http://jsfiddle.net/pda2yc6s

在垂直滚动时，div 会变得粘滞。当窗口小于 wrapper 宽度时，水平滚动会使粘性从其父 div 中出来。

这是CSS:

div#wrapper {
    background-color: #ffffff;
    margin: 0 auto;
    width: 1058px;
}
div#mainContent {
    float: left;
    width: 728px;
}
div#sideBar {
    float: right;
    width: 300px;
}
.stick {
    background-color: #ffffff;
    border-bottom: 1px solid;
    position: fixed;
    top: 0;
    height: 46px;
    width: 728px;
}

这个 javascript 使粘性工作:

    $(document).ready(function () {
    var s = $("#mainContent h1");
    s.wrap('<div class="sticky-wrapper"></div>');
    var pos = s.position();
    var t = $('.sticky-wrapper');
    $(window).scroll(function () {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            t.height(46);
            s.addClass("stick");
        } else {
            t.removeAttr('style');
            s.removeClass("stick");
        }
    });
});

为什么这个粘性行为是这样的？如何解决？

Answer 1

要事第一:

1. 根据 http://www.w3.org/TR/css3-positioning/#fixed-pos

...for a fixed positioned box, the containing block is established by the viewport...

因此，您不能让一个元素固定，同时又将其限制在其直接父级内。

1. 来自同一引用:

For continuous media, fixed boxes do not move when the document is scrolled

这意味着 fixed 元素在您滚动时根本不会移动。垂直或水平。

---

现在，您面临的问题是您的页面宽度大于视口(viewport)，因此会触发水平滚动。尽管您的粘性 (fixed) div 与主 div 的宽度相同，但它在水平滚动时不会移动，因此会越来越多当您的内容从下方向左移动时，覆盖您的侧边栏。

如果您不想重组您的标记以将所有内容保持在视口(viewport)宽度内(以免导致水平滚动)，那么您需要手动更改左侧 滚动时的属性。

您已经有一个用于窗口滚动的事件监听器。在其中添加一些代码来更改 left 属性。像这样:

$(window).scroll(function () {
    ...
    var winleft = $(window).scrollLeft();
    if (windowpos >= pos.top) {
        ...
        s.css({'left': -(winleft)});
...

这是你的 fiddle ，上面包含:http://jsfiddle.net/abhitalks/pda2yc6s/6/

您要做的是有效地更改 left 属性，使其与滚动的水平距离相同。这将使您的 fixed 粘性 div 位于主要 div 内容之上，而不是覆盖边栏。

注意:这很丑陋。您可能需要重新考虑您的标记和设计。

.