Javascript 位置固定在容器元素中，而不是浏览器/视口中

我需要在包含的父对象中定位要固定的标题，以便在滚动时跟随它。问题是

position:fixed

将位置固定到浏览器，而不是父浏览器。这导致的结果是，当我有一个宽度为溢出的水平滚动的容器（内容比容器宽）时，我的固定标题没有像表的内容那样有溢出滚动

看到这个了吗

因此，这里的目标是固定标题的位置，但相对于其父容器是固定的。在这把小提琴中，您可以看到我注释掉了一块css：

.container{

     /*-webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);*/

     -webkit-transform: none;
     -moz-transform: none;
     -ms-transform: none;
     transform: none;   
}

如果将当前css块（transform设置为none）替换为translateZ，则标头将定位在其父容器中，但不再固定

---

有人知道怎么解决这个问题吗？首选的解决方案是只使用CSS/HTML，避免使用JS，但如果没有其他解决方案，那么JS当然是我需要的

将标题的位置设置为“绝对”，将其父容器（您希望它与之相对）设置为“相对”，并将其设置为使用“top:0”粘贴到父容器的顶部

CSS:

---

无法使用

position:fixed

将元素固定在父元素中，因为

position:fixed

接受元素，因此它没有父元素。它相对于视口定位自身

为了实现您的目标，在保持简单高效的同时，您可能需要考虑：“一个客户端库，以使绝对定位的元素有效地附着到页面中的元素”。

---

希望这有帮助。祝你好运。

CSS不能自己做到这一点

Position:fixed

与视口相关，而不是它包含的元素

我见过使用CSS3

transform

属性，但是（正如您在对我的第一个答案的评论中所指出的）它似乎不起作用

我知道您不能使用任何客户端库，但据我所知，这是唯一可用的解决方案。对于你和其他可能有一天需要的人，这里有一个有效的解决方案。它使用了一点jQuery：

将一个元素定位在另一个元素内，且定位的元素沿x和y轴固定（即水平和垂直固定的位置）。

HTML

<div class="moving-article">

    <div class="container">

    <header class="fixed-header">FIXED HEADER</header>

        <ul>
        <li>SCROLL</li>
        <li>SCROLL</li>
        <li>SCROLL</li>
        </ul>    

    </div>

</div>

jQuery

var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
    $('.fixed-header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});

---

要修复与父对象相关的内容，您需要在父对象上设置

position:relative

，在子对象上设置

position:absolute

，以产生与使用变换时相同的结果？标题不在滚动之后。也许我误解了，你能解释一下你到底想实现什么吗？我需要在向下滚动窗口时，标题跟随包含的父项。当我的标题的内容比容器宽时，它应该给我一个水平滚动（如演示中所示），但它仍然应该沿着向下滚动，那么为什么要将标题放在容器内呢？你可以把它放在它上面，这样它在y轴上会保持固定，并给它相同的x轴设置（溢出等），这将导致我有一个单独的滚动条用于标题，一个单独的滚动条用于容器内的内容。我将把它应用于一个宽度未知（动态）但位于引导容器中的表。如果内容太宽，您必须水平滚动以查看溢出的内容（以及垂直滚动之后的标题）。谢谢@mbnyc，但我不能使用客户端lib。没有其他建议吗？也许你可以用CSS3的

transform

属性来完成。这也没用。虽然它正确地固定在容器上，但滚动时它不会固定在容器顶部。再次感谢@mbnyc，我可能不得不重新考虑我的选择。然而，在某些情况下，这似乎是可行的，如果在标题和内容上都存在水平溢出，它就不起作用。我需要将标题溢出隐藏在容器中，就像它的内容一样。根据你的评论，我不完全确定什么不起作用。我用内容填充了fiddle演示标签，滚动和定位机制运行良好。请详细说明。或者在演示中复制问题并发布更新的链接。假设容器类的宽度为1000px，并且您有一个水平的溢出滚动条。然后标题应该和容器中的内容一样宽，并且使用相同的水平滚动。如果将标题的宽度设置为100%，那么标题将与容器重叠并填满整个屏幕。下面是该示例的一部分：。现在的要点是，标题需要与其他内容一起“在”容器中。因此，当您水平滚动以查看内容时，标题如下。答案是将

位置：relative

添加到标题的父容器（

.container

）。这是更新后的fiddle：当您添加相对于父（.container）的位置时，您将删除以下滚动标题的功能。还是你在小提琴上也跟着？

.moving-article {
    height: 150px;
    width: 75%;
    overflow-x: scroll;     
}

.fixed-header {
    background: rgba(0,0,0,0.5);
    width: 50%;
    text-align: center;
    line-height: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.container{
    width: 1000px;
}

var leftOffset = parseInt($(".fixed-header").css('left'));
$(window).scroll(function(){
    $('.fixed-header').css({
        'left': $(this).scrollLeft() + leftOffset
    });
});