>

스크롤 할 때 따라 오도록 포함 부모 내에서 고정 할 헤더를 배치해야합니다. 문제는

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 블록으로 바꾸면 헤더가 상위 컨테이너 내에 배치되지만 더 이상 고정되지 않습니다.

이 문제를 해결하는 방법을 아는 사람이 있습니까? 선호되는 솔루션은 CSS/HTML만이 고 JS는 피하지만 다른 것이 없다면 JS는 물론 내가해야 할 것입니다!


  • 답변 # 1

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

  • 답변 # 2

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

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

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

  • 답변 # 3

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

    CSS :

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

관련 자료

  • 이전 SQL Server 2008에서는 NHibernate에서 테이블 반환 매개 변수를 저장 프로 시저에 전달할 수 있습니다
  • 다음 c# - 왜 doubleParse ("005")가 50을 반환합니까?