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

Question

我需要将一个标题定位在包含父项中,以便在滚动时跟随它.问题是

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块(变换设置为none)替换为带有translateZ的块,则标题将位于其父容器中,但不再修复.

有谁知道如何解决这个问题？首选的解决方案是CSS/HTML并避免使用JS,但如果没有别的话,那么JS当然是我需要的!

Answer 1

CSS 本身无法做到这一点。

Position: fixed与视口相关，而不是与包含元素相关。

我已经看到尝试使用 CSS3transform属性来解决这个问题，但是（正如您在对我的第一个答案的评论中指出的那样）它似乎不起作用。

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

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

http://jsfiddle.net/8086p69z/8/

超文本标记语言

<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>

CSS（相关部分）

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

jQuery

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