Bootstrap Affix Nav Nedenler Yukarı Git Yukarı Gitmek İçin

Question

Aşağıya indiğinizde ve üstbilginin görünümü dışında kaldığında ekranın üst kısmında bir gezinme yapmak için Bootstrap'in ekleme işlevini kullanarak bir JSFiddle oluşturdum.

Yapmakta olduğum sorun, saf HTML kullanırken, nav'ın altındaki metnin atlaması ve navun arkasına çok erken bir zamanda gizlenmesidir.

here sorunlu koduna bakın.

<div class="container"> 
<div class="row"> 
    <div class="span12"> 
     <div class="well"> 
      <h1>Banner</h1> 
     </div> 
    </div> 
</div> 
</div> 
<div class="nav-wrapper"> 
<div class="nav navbar affix" data-spy="affix" data-offset-top="120"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <div class="span12"> 
       <a class="brand" href="#">My Brand</a> 
       <span class="navbar-text"> 
        This is a navbar. 
       </span> 
      </div>  
     </div> 
    </div> 
</div> 
</div> 
<div class="container"> 
<div class="span3"> 
    <h2>some lorem ipsum for scrolling:</h2> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
</div> 
</div> 

CSS aşağıdaki gibidir:

İşte kullandığım kod

.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 

Ben çok benzer bir sorun here buldum ama nedense bu örnekte olduğu gibi kod kullanırken Benim için çalışmıyor.

şöyle hiledir yaptılar CSS ekstra parça:

$(function() { 
    $('#nav-wrapper').height($("#nav").height()); 

    $('#nav').affix({ 
     offset: { top: $('#nav').offset().top } 
    }); 
}); 

:

.affix + .container { 
    padding-top:50px 
} 

Ben de böyle istenen etkiyi yaratmak için aşağıdaki kodu kullanan this one here olarak JavaScript çözümlerinin farkındayım

Sadece CSS dolgu üst düzeltme kullanarak önceki düzeltmeyi uygularken, yalnızca benim HTML sürümümün neden hareket etmediğini anlamaya çalışıyorum.

Yardımlarınız için şimdiden teşekkür ederiz.

Answer 1

Bu iş gibi görünüyor: jsFiddle Güncelleme

.nav-wrapper 
{ 
    min-height:50px; 
} 

: Eklerin eklentisi .affix sınıfla elemanı yapar ne oluyor http://jsfiddle.net/yYE62/5/

belgede bir sabit konuma sahiptirler. Bu, yapıştırılmış elemanı akıştan (ya da tercih ederseniz düzen) kaldırır ve konteynerin çökmesine neden olur. Bu olduğunda, aşağıdaki içerik yapıştırılmış elemanın işgal ettiği alanı doldurmak için yukarı kaydırılır.

Yukarıdaki kuralı ekleyerek, kapsayıcının içeriğe sahip olup olmadığına bakılmaksızın minimum bir yüksekliğe sahip olmasını söylersiniz. 50px olmak zorunda değildir; Bu, varsayılan .navbar yüksekliğidir, dolayısıyla ihtiyaçlarınızı karşılayacak şekilde ayarlayın. 'un tüm.nav-wrapper s en düşük bir yüksekliğe sahip olmasını istemiyorsanız, bir id atayın ve bunu kullanın.

Answer 2

Kusursuz çalışmak için ekstra bir sarıcıya ihtiyacınız var. Ona sahip olduğunuzla aynı bir minimum yükseklik verin :)