Cần một vị trí cố định div bên trong một div vị trí tuyệt đối

Question

Tôi đang sử dụng plugin Snap.js - (nó cho phép bạn tạo các ngăn kéo/thanh cuộn bên).

Nó hoạt động bằng cách tạo 3 div vị trí hoàn toàn, một trong số đó chứa nội dung chính.

Có cách nào để định vị div được cố định lên trên cùng của cửa sổ khi nó nằm bên trong div được định vị hoàn toàn không.

Hiện tại, tôi chỉ nhận được div cố định để ghim lên đầu div tuyệt đối được định vị, chứ không phải ở đầu trình duyệt. Khi tôi cuộn, div vẫn cố định ở phía trên cùng của nội dung chính, chứ không phải là cửa sổ.

Ví dụ:

<div style="position:absolute;"> 

    <div style="position:fixed;top:0"> 
     <!-- some content which needs to be pinned to top of window --> 
    </div> 

</div> 

Tại thời điểm tôi đang sử dụng javascript để theo dõi các cuộn offset và tự điều chỉnh vị trí hàng đầu của div đứa trẻ, mà không phải là lý tưởng cho các hoạt động.

Bất kỳ trợ giúp nào được đánh giá cao!

Answer 1

Tôi đã thực hiện một fiddle thấy workaround javascript tôi thấy - nó Jitters khi di chuyển trong internet explorer, bất kỳ ý tưởng.

<div id="displayed-content" class="snap-content scrollable"> 
    <div><!-- regular content --></div> 
     <div><!-- fixed content --></div> 
    <div><!-- footer content --></div> 
</div> 

http://jsfiddle.net/bxRVT/

Answer 2

Tôi đoán một chút về những gì bạn đang cố gắng để làm, nhưng bạn có thể tìm kiếm một cái gì đó như thế này:

<div class="local-wrap"> 
    <div class="fixed"> 
     Some content which needs to be pinned to top of window 
    </div> 
    <div class="port"> 
     Regular content... 
    </div> 
</div> 

và áp dụng CSS sau đây:

.local-wrap { 
    position: relative; 
} 
.local-wrap .fixed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background-color: lightgray; 
    width: 100%; 
    height: 5.00em; 
} 
.local-wrap .port { 
    position: relative; 
    top: 5.00em; 
    min-height: 10em; 
    height: 15em; 
    overflow: auto; 
    border: 1px solid gray; 
    border-width: 0 1px 1px 1px; 
} 

Demo fiddle: http://jsfiddle.net/audetwebdesign/pTJbW/

Về cơ bản, để có được khối cố định đối với phần tử khối, bạn cần phải sử dụng định vị tuyệt đối. Định vị cố định luôn liên quan đến phần tử gốc hoặc cổng xem, vì vậy position: fixed sẽ không giúp bạn.

Điều tôi đã làm là xác định vùng chứa .local-wrap, với hai khối con, một khối là được đặt hoàn toàn ở đầu .local-wrap và cột còn lại theo quy trình thông thường. Tôi đã sử dụng position: relative để đặt nó bên dưới .fixed, nhưng lợi nhuận hàng đầu cũng sẽ hoạt động.

Tôi đã sửa một số độ cao để thể hiện nội dung cuộn trong cửa sổ/cổng cục bộ, nhưng điều đó có thể thay đổi tùy thuộc vào thiết kế và ứng dụng của bạn.

Disclaimer

Tôi không quen thuộc với snap.js do đó có thể cân nhắc khác để xem xét.

Nhận xét về CSS3 Transform và cố định Elements

Theo thông số kỹ thuật CSS3, nếu bạn áp dụng một chuyển đổi để một phần tử, gọi nó là div.transformed, sau đó div.transformed tạo ra một bối cảnh xếp chồng mới và đóng vai trò như một chứa chặn cho bất kỳ phần tử con vị trí cố định nào mà nó chứa, đó là lý do tại sao trong kịch bản của bạn, bối cảnh vị trí cố định không ở trên đầu cửa sổ.

Để tham khảo, Mozilla Developer Network -> CSS Reference -> Transform