Bootstrap - sütun genişliklerinin konumunu kullanarak korunması: sabit?

Question

Sayfanın öğeye ilerlediğinde, sayfanın bir "yapışkan" gezinme oluşturmasına çalışıyorum. İşlevsellik beklendiği gibi çalışıyor, ancak yapışkan sınıf eklendiğinde üstte yapışması gereken iki sütunun genişliği değişiyor. Yapışkan öğenin CSS'sine width:100%; eklemeyi denedim, ancak öğe kapsayıcının ötesine genişler.

Sütun genişliklerinin position:fixed; eklendiğinde olması gereken yerde kalmasını nasıl sağlayabilirim?

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

Teşekkürler!

Answer 1

Sabit konum, gövdeye göre olduğundan, 100% genişliğini gövde genişliğinden sayar. Javascript kullanmanız tamamsa, kapsayıcı genişliğini alarak yapışkan genişliğini ayarlayabilirsiniz. Updated Fiddle

Answer 2

kutusunu kontrol edin. Kapsayıcınızı "konteyner sıvısı" olarak ayarlayıp daha sonra genişliği ekleyerek işe alabiliyordum:% 100; .stick sınıfına.

Answer 3

eklenti:

width:inherit; 

Nanang Mahdaen El Agun bahsedilen .sticky.stick

JSFiddle

gibi, sabit pozisyonlu bir gövde genişliği ile ilgilidir kayıt için. Set width of a "Position: fixed" div relative to parent div

Answer 4

Kapsayıcıdaki etrafında% 100 genişlik sarmalayıcı ekleyip bunun yerine sopa olabilir: width:inherit; sayesinde .container sınıf

referans genişliğini kullanır.

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

güncellenmiş keman: Sabit konumlandırma eklendikten sonra https://jsfiddle.net/mileandra/omeegfc7/