2013-06-12 17 views
8

Yüklendikten sonra sayfanın üst kısmından yaklaşık 200px hızında başlayan bir nav-bar var. Aşağı kaydırırken, nav-çubuğunun kendisini sayfanın en üst kısmına "eklemesini" ve içeriğin geri kalanı boyunca ilerlerken görünür olmasını istiyorum. En üstteki 200px olsa da nav çubuğunun yerinde kalmasını sağlıyorum ve sağa çektiğim içeriği yok sayar ve hepsini sola çeker. navbarın görünür kalmasını ve düzen/stilin tümüyle aynı kalmasını sağladım.twitter bootstrap fix navbar kaydırdıktan sonra

Güncelleme: üzgün

aşağıda i

<!-- Begin Logo/Search --> 
    <header class="masthead"> 
     <div class="row"> 
     <div class="span6"> 
      <div class="logo pull-left"> 
       <h1><a href="/">name</a></h1> 
      </div> 
     </div> 
     <div class="span6"> 
      <div class="pull-right hidden-phone"> 
       <form class="search" action="/search" id="site-search"> 
        <input type="hidden" name="records" value="6"> 
        <div class="input-append"> 
         <input type="text" name="q" class="search_box" placeholder="Search" value="" autocomplete="off" /> 
         <button class="btn" type="submit"><i class="icon-search"></i></button> 
        </div> 
       </form>  
      </div> 
     </div> 
     </div> 
    </header>   


    <!-- Begin Navbar --> 
    <div> 
    <div class="navbar navbar-static"> 
     <div class="navbar-inner" id="mastnav"> 
     <div class="container"> 
      <!-- .btn-navbar is used as the toggle for collapsed navbar content --> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
      <div class="nav-collapse collapse"> 
       <ul class="nav"><li><a href="#">nav</a> </li></ul> 
       <ul class="nav pull-right"> 
        <li> 
         <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a> 
        </li> 
       </ul> 
      </div>  
     </div> 
     </div> 
    </div><!-- /.navbar --> 
    </div> 

JSFIDDLE

cevap

11

Nav, affix haline geldiğinde, artık normal navbar CSS stillerini takip etmiyor. Dış DIV konteynerine bir kimlik verebilir ve bunu “ek” öğesi olarak ayarlayabilirsiniz. % 100 genişlikte kaldığından emin olmak için CSS kullanın.

#nav.affix { 
    position: fixed; 
    top: 0; 
    width: 100% 
} 
Sen gezinme çubuğu bir dış kaba tespit ekiyle gereken

Working Demo

+0

bu yanıt parti çalışıyor, ancak şimdi navbar sağ tarafta sayfa aşıyor –

+0

kimse bu olsun navbar sınırları aşmıyor tarayıcı penceresinde –

2
Burada

istediğini başarması bundan modifiye jsfiddle olduğu ile sorun yaşıyorum neyi gösterir benim jsfiddle olduğunu! yanlış jsfiddle yapıştırıldı! Olumsuz oy verdiğimde fark ettim! Bir an

Güncelleme tekrar ve güncelleme yapacağım: burada geçerli:

fazladan not olarak

http://jsfiddle.net/KUPbD/4/

, bunu data-spy="affix" ve data-offset-top="" ile html yapıştırın ilan edebilir hayır Ekstra satır içi komut dosyası için gereksinim

+0

Tüm tarayıcılarda çalışır, ancak ipad veya iPhone aygıtında çalışmaz, herhangi bir fikir? - aslında işe yaramıyor ama bir gecikme var –

+0

Gecikme nedeniyle tabletler kaydırma olay –

-2

i ... buna

bu Js üzerinde hiçbir değişiklik, ancak html yapısında bazı değişiklikler yapmış: -

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

Demo: - http://jsfiddle.net/KUPbD/1/

2
<script type="text/javascript"> 
    $(document).ready(function(e) { 

     $(window).scroll(function() { 
      if ($(window).scrollTop() > $('.navbar').offset().top) { 
       $('.navbar').addClass('navbar-fixed-top'); 
       $('.navbar').removeClass('navbar-static-top');     
      } else { 
       $('.navbar').removeClass('navbar-fixed-top'); 
       $('.navbar').addClass('navbar-static-top');  
      } 
     });   

    }); 
</script> 
İlgili konular