Javascript 为什么水平滚动时会显示fixed div？

我在这把小提琴中演示了这个问题：

垂直滚动时，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");
        }
    });
});

$（文档）.ready（函数（）{
var s=$（“#主要内容h1”）；
s、 包裹（“”）；
var pos=s.位置（）；
var t=$（'.sticky wrapper'）；
$（窗口）。滚动（函数（）{
var windowpos=$（window.scrollTop（）；
如果（窗口位置>=位置顶部）{
t、 身高（46）；
s、 addClass（“stick”）；
}否则{
t、 removeAttr（“风格”）；
s、 移除类（“棒”）；
}
});
});

---

为什么这个黏糊糊的家伙会这样？如何解决它？

如下更改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;
}

---

为边栏设置更大的z-索引（也带有相对位置）将使边栏与杆元素重叠。我想这就是你想要的效果。我更新了你的小提琴，因为它在css中的位置：

你给的位置是固定的，所以它的行为像粘性

变成

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

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

试试：

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%;
}

---

这是因为固定左边是从屏幕左边计算出来的，而不是从文档左边计算出来的。所以，即使StickyHeader和其父div的宽度为728px，它们也不会在同一点结束

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

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

编辑

第一件事：

…对于固定位置的框，包含块由 视口

因此，您不能让一个元素

固定

，同时将其限制在其直接父元素中

来自同一参考文献：

对于连续介质，固定框在文档移动时不会移动 滚动

这意味着当您滚动时，

fixed

元素将不会移动。垂直或水平

---

现在，您面临的问题是，页面的宽度大于视口，因此会触发水平滚动。虽然您的粘性（

fixed

）

div

与主

div

具有相同的宽度，但当水平滚动时，它不会移动，因此当您的内容从侧边栏下方向左移动时，侧边栏将逐渐被覆盖

如果不希望重新构造标记以将所有内容保持在视口宽度内（以免导致水平滚动），则需要在滚动时手动更改

left

属性

您已经有一个用于窗口滚动的事件侦听器。在其中，添加一些代码以更改

left

属性。像这样：

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

这是您对上述内容的处理：

您将要做的是有效地更改

left

属性，更改量与滚动水平距离相同。这将使您的

内容固定在主
div
内容之上，而不会覆盖侧边栏

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

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

`postion:absolute;`

!！它能工作
只是想知道，为什么不花点精力让网站对窄屏幕更敏感（而不是试图让笨拙的侧边栏水平滚动不那么难看）？@g13是
的预期结果。粘贴
元素
宽度
设置为侧边栏上方的100%视口，或者在
.stick
@guest271314上显示右侧的边栏，我希望.stick元素位于父div中always@g13父级
div#mainContent
。似乎已将
width
设置为
728px
？您尚未理解我的问题。感谢您的见解，Aman，当媒体查询更改包装宽度大于768px（平板电脑和桌面屏幕）时，水平滚动将发挥作用。这使包装宽度固定。请参阅我的编辑以获得可能的解决方案，但您也可以使用响应式站点布局解决方案，如twitter引导，以更安全
`postion:absolute;`