位置固定在容器元素内，而不是浏览器/视口 [英] Position fixed within container element instead of the browser / viewport

问题描述

我需要将一个标题定位在包含父元素内，以便在滚动时跟随它。问题是

I need to position a header to be fixed within the containing parent so that it follows when scrolling. The problem is that

position:fixed

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

fixes the position to the browser, not the parent. What this is resulting in is that when I have a container that has a horizontal scroll for overflow in the width (the content is wider than the container), my fixed header does not have the overflow-scroll as the content of the table does.

查看此小提示演示

因此，这里的目标是修复头的位置，但相对于它的父容器固定。在这个小提琴，你可以看到我注释掉了一块CSS：

So the goal here is to fix the position of the header, but fixed relative to it's parent container. In this fiddle, you can see that I've commented out a block of 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，标题将获得定位在其父容器，但不再修复。

If you replace the current css block (with transform set to none) with the one with translateZ, the header will get positioned within it's parent container, but is no longer fixed.

任何人都知道如何解决这个问题？首选解决方案是CSS / HTML，并避免JS，但如果没有别的，那么JS当然是我需要去的。

Anyone know how to solve this? Preferred solution would be CSS/HTML only and avoid JS but if nothing else, then JS is of course what I need to go with!

推荐答案

CSS本身不能这样做。

CSS can't do this by itself.

位置：fixed 不包含元素。

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

I've seen an attempt to solve this problem using the CSS3 transform property, but (as you noted in your comment to my first answer) it doesn't seem to work.

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

I understand you can't use any client-side library but that's the only solution available to my knowledge. For you and others who may one day need this, here's a solution that works. It employs a bit of jQuery:

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

http：// jsfiddle。 net / 8086p69z / 8 /

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>

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

这篇关于位置固定在容器元素内，而不是浏览器/视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！