Question

我在这个小提琴中证明了这个问题：http://jsfiddle.net/pda2yc6s

在垂直滚动上，div变为粘滞。当窗口小于包装器宽度时，水平滚动会使其粘性从其父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

首先要做的事情：

每http://www.w3.org/TR/css3-positioning/#fixed-pos

...对于固定定位的盒子，包含块由建立视口......

所以，你不能拥有一个元素fixed，同时将它限制在它的直接父母中。

来自同一篇文章：

对于连续媒体，文档时固定框不会移动滚动

其中，表示滚动时fixed元素根本不会移动。垂直或水平。

现在，您遇到的问题是您的页面宽度大于视口，因此会触发水平滚动。虽然，您的粘性（fixed）div与主div的宽度相同，但在水平滚动时它不会移动，因此会越来越多地覆盖您的侧边栏，因为您的内容向左移动从它下面。

如果您不想重新构建标记以保持视口宽度内的所有内容（以免导致水平滚动），则需要手动将left属性更改为滚动。

您已经有一个窗口滚动的事件监听器。在那里添加一些代码来改变left属性。像这样：

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

以上是您的小提琴：http://jsfiddle.net/abhitalks/pda2yc6s/6/

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

注意：这很难看。您可能想重新考虑您的标记和设计。

Answer 2

像这样改变你的CSS：

div#sideBar 
{
    float: right;
    width: 300px;
    z-index:1;
    position: relative;
}

.stick 
{
    background-color: #ffffff;
    border-bottom: 1px solid;
    position: fixed;
    top: 0;
    height: 46px;
    width: 728px;
    z-index:0;
}

为sideBar设置更大的z-index（也使用相对位置）使得stick元素将与侧边栏重叠。我想这就是你想要的效果。我更新了你的小提琴http://jsfiddle.net/pda2yc6s/2/

Answer 3

因为在css中的位置：

你给的位置是固定的，所以它表现得很粘。

改为

 .stick {
    background-color: #ffffff;
    border-bottom: 1px solid;
    position: static;
    top: 0;
    height: 46px;
    width: 728px;
}

有关POSITION的更多信息，请参阅此

http://learnlayout.com/position.html

Answer 4

尝试：

html, body {
    margin: 0;
    padding: 0;
}
body {
    background-color: #dddddd;
    color: #444444;
    font-size: 13px;
    line-height: 18px;
}
div#wrapper {
    background-color: #ffffff;
    margin: 0 auto;
    width: 100%;
}
div#mainContent {
    float: left;
    width: 60%;
}
div#sideBar {
    float: right;
    width: 40%;
}
.clear {
    clear: both;
}
h1 {
    line-height: 1.6em;
    margin: 0 auto;
}
.box {
    width: 300px;
    height: 600px;
    background-color: #aaaaaa;
}
.stick {
    background-color: #ffffff;
    border-bottom: 1px solid;
    position: fixed;
    top: 0;
    height: 46px;
    width: 60%;
}

http://jsfiddle.net/pda2yc6s/4/

Answer 5

这是因为固定的左边是从左边的屏幕计算而不是左边的文件。因此即使粘性标题及其父div具有728px宽度，它们也不会在同一点结束。

如果不需要水平滚动，则应使内容适合无水平滚动布局，否则您必须在每次水平滚动更改时重新计算粘贴标题的左侧位置。

如果您需要小提琴，请告诉我

修改

http://jsfiddle.net/dango_x_daikazoku/g589jk0v/1/

var left = $("body").scrollLeft(); s.css("left", -left + "px");

Answer 6

只需将css文件中的“.stick”类的postion值更改为绝对值，如

`postion:absolute;`

！它的工作原理

为什么在水平滚动时会出现固定div？

6 个答案: