Vị trí được cố định trong phần tử vùng chứa thay vì trình duyệt/khung nhìn

Question

Tôi cần định vị một tiêu đề để được sửa trong phần tử chứa để nó sau khi cuộn. Vấn đề là

position:fixed 

sửa vị trí cho trình duyệt chứ không phải phụ huynh. Điều này dẫn đến là khi tôi có một vùng chứa có một cuộn ngang cho tràn trong chiều rộng (nội dung rộng hơn vùng chứa), tiêu đề cố định của tôi không có quá trình cuộn tràn như nội dung của bảng.

Xem này fiddle demo

Vì vậy, mục tiêu ở đây là để sửa chữa các vị trí của tiêu đề, nhưng cố định tương ứng với nó chứa mẹ. Trong fiddle này, bạn có thể thấy rằng tôi đã nhận xét ra một khối 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; 
} 

Nếu bạn thay thế khối css hiện tại (với transform set không ai sánh kịp) với một với translateZ, tiêu đề sẽ nhận được vị trí tốt bên trong vùng chứa chính, nhưng không còn cố định nữa.

Bất kỳ ai biết cách giải quyết vấn đề này? Giải pháp ưu tiên sẽ là CSS/HTML duy nhất và tránh JS nhưng nếu không có gì khác, thì JS là tất nhiên những gì tôi cần phải đi với!

Answer 1

CSS không thể tự làm điều này.

Position: fixed hoạt động liên quan đến chế độ xem, không phải nó chứa phần tử.

Tôi đã xem an attempt to solve this problem bằng cách sử dụng thuộc tính CSS3 transform, nhưng (như bạn đã lưu ý trong nhận xét của mình cho câu trả lời đầu tiên) có vẻ như nó không hoạt động.

Tôi hiểu rằng bạn không thể sử dụng bất kỳ thư viện phía máy khách nào nhưng đó là giải pháp duy nhất có sẵn cho kiến ​​thức của tôi. Đối với bạn và những người khác có thể cần một ngày, đây là một giải pháp hoạt động. Nó sử dụng một chút jQuery:

vị một yếu tố bên trong một phần tử với các yếu tố vị trí cố định dọc theo trục x và y (ví dụ: vị trí cố định theo chiều ngang và theo chiều dọc).

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 (phần có liên quan)

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

Answer 2

đặt vị trí của tiêu đề thành 'tuyệt đối' và đó là vùng chứa mẹ (mà bạn muốn nó tương đối) thành 'tương đối' và đặt nó ở trên cùng của phần tử gốc với 'top: 0'

CSS:

.container { 
    position: relative; 
} 

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

Answer 3

Để giữ một yếu tố cố định trong vòng một phụ huynh không thể được thực hiện với position: fixed vì position: fixed mất yếu tố out of the flow và do đó nó không có cha mẹ. Vị trí của nó tương ứng với khung nhìn.

Để đạt được mục tiêu, trong khi giữ mọi thứ đơn giản và hiệu quả, bạn có thể muốn xem xét Tether, "thư viện phía máy khách để tạo các phần tử được định vị hoàn toàn gắn với các phần tử trong trang một cách hiệu quả".

Hy vọng điều này sẽ hữu ích. Chúc may mắn.