javascript - 브라우저/뷰포트 대신 컨테이너 요소 내에서 고정 된 위치

CSS는이 작업을 자체적으로 수행 할 수 없습니다.

Position: fixed  요소를 포함하지 않고 뷰포트와 관련하여 작동합니다.

CSS3 transform 를 사용하여이 문제를 해결하려는 시도를 보았습니다.  속성,하지만 (첫 번째 답변에 대한 귀하의 의견에서 언급했듯이) 작동하지 않는 것 같습니다.

클라이언트 측 라이브러리를 사용할 수 없다는 것을 알고 있지만 이것이 내 지식으로는 사용할 수있는 유일한 솔루션입니다. 언젠가 이것을 필요로하는 다른 사람들을 위해, 여기에 효과적인 해결책이 있습니다. 약간의 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
    });
});

부모 내에 고정 된 요소를 유지하려면 position: fixed 를 사용하여 수행 할 수 없습니다   position: fixed 때문에  흐름에서 요소를 제거하므로 부모가 없습니다. 뷰포트를 기준으로 위치합니다.

목표를 달성하기 위해 단순하고 효율적으로 작업하기 위해, "절대적으로 배치 된 요소를 페이지의 요소에 효율적으로 첨부 할 수있는 클라이언트 측 라이브러리"인 Tether를 고려할 수 있습니다.

이것이 도움이되기를 바랍니다. 행운을 빕니다.

헤더의 위치를 ​​'절대'로 설정하고 상위 컨테이너 (상대적으로 원함)를 '상대적'으로 설정하고 상위의 상위에 고정되도록 설정하십시오. 'top : 0'으로

CSS :

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
}