Bootstrap - duy trì chiều rộng cột bằng vị trí: cố định?

Question

Tôi đang cố gắng tạo điều hướng "dính" trên trang của mình trong đó div được position:fixed; khi người dùng đã cuộn đến phần tử. Chức năng này hoạt động như mong đợi, nhưng độ rộng của hai cột được cho là sẽ dính vào thay đổi hàng đầu khi lớp dính được thêm vào. Tôi đã thử thêm width:100%; vào CSS của phần tử dính, nhưng sau đó phần tử mở rộng ra ngoài vùng chứa.

Làm cách nào để đảm bảo chiều rộng cột ở vị trí cần thiết khi bạn thêm position:fixed;?

HMTL:

<div class="container"> 
    <div class="padding"></div> 
    <div class="anchor"></div> 
    <div class="row sticky"> 
     <div class="col-sm-6"> 
      Testing 
     </div> 
     <div class="col-sm-6"> 
      Testing 
     </div> 
    </div> 
    <div class="padding2"></div> 
</div> 

CSS:

.padding { 
    height:250px; 
} 
.padding2 { 
    height:1000px; 
} 
.sticky { 
    background:#000; 
    height:50px; 
    line-height:50px; 
    color:#fff; 
    font-weight:bold; 
} 
    .sticky.stick { 
     position:fixed; 
     top:0; 
     z-index:10000; 
    } 

JS:

function stickyDiv() { 
    var top = $(window).scrollTop(); 
    var divTop = $('.anchor').offset().top; 
    if (top > divTop) { 
     $('.sticky').addClass('stick'); 
    } else { 
     $('.sticky').removeClass('stick'); 
    } 
} 

$(window).scroll(function(){ 
    stickyDiv(); 
}); 
stickyDiv(); 

JSFiddle

Cảm ơn!

Answer 1

Vị trí cố định tương đối so với phần thân, do đó, nó sẽ đếm chiều rộng 100% từ chiều rộng cơ thể. Nếu sử dụng javascript là ok, bạn có thể đặt chiều rộng dính bằng cách nhận chiều rộng vùng chứa. Kiểm tra Updated Fiddle

Answer 2

Tôi có thể làm cho thiết bị hoạt động bằng cách đặt vùng chứa của bạn thành "vùng chứa chứa chất lỏng" rồi thêm chiều rộng: 100%; vào lớp .stick của bạn.

Answer 3

add:

width:inherit; 

để bạn .sticky.stick

JSFiddle

như Nanang Mahdaen El-Agun nói, một vị trí cố định liên quan chiều rộng cho cơ thể. Với width:inherit; nó sẽ sử dụng độ rộng của .container lớp

tham khảo: Set width of a "Position: fixed" div relative to parent div

Answer 4

Bạn có thể thêm chiều rộng wrapper 100% xung quanh các thùng chứa và có dính đó để thay thế.

<div class="wrap"> 
    <div class="container sticky"> 
     <div class="row"> 
     ... 
     </div> 
    </div> 
</div> 

cập nhật fiddle: https://jsfiddle.net/mileandra/omeegfc7/