2013-02-11 35 views
6

Twitter bootstrap navbar için aşağıdaki http://codepen.io/anon/pen/eIfdn 'a bakıyorum. Sadece kaydırdıktan sonra navona gölge ekler. Herhangi bir tavsiye yardımcı olabilir teşekkür ederim. Twitter bootstrap navbar gölgesinde kaydırma

.navbar { 
*position: relative; 
top: 0; 
left: 0; 
width: 100%; 
height: 80px; 
z-index: 999; 
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
display: none; 
*z-index: 2; 
margin-bottom: 20px; 
overflow: visible; 
} 

CSS Thats değişti ve yukarıdan js ilave edildi.
http://jsfiddle.net/panchroma/pyYfG/

HTML

<div class="navbar" data-spy="affix"> 
<div class="navbar-inner"> 
.... standard navbar stuff ... 
</div> 
</div> 
<div id="top-shadow"></div> 
.... page content ... 

CSS

: Burada

başlamak için somenthing I Burada
$(document).ready(function(){ 
$(window).scroll(function(){ 
    var y = $(window).scrollTop(); 
    if(y > 0){ 
    $("#navbar").css({'display':'block', 'opacity':y/20}); 
    } else { 
    $("#navbar").css({'display':'block', 'opacity':y/20}); 
    } 
}); 
}) 
+3

Kodunuz olan bir şeyi nasıl yapacağınızı öğrenmek istiyor musunuz? –

+0

Her defasında, bootstrap navbarına aşağıdakileri eklediğimde, ne yaptığımdan emin değilim. – Morki

+0

"Bu kırılıyor" geniş bir sorundur. Bize gösterebilir misin? –

cevap

11

kullanılan JS var
#top-shadow { 
position: fixed; 
top: 0; 
left: 20px; 
width: 100%; 
height: 42px; 
z-index: 999; 
-webkit-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5); 
display: none; 
} 

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

/* UPDATE BELOW */ 
.navbar{  
z-index:1000; /* lift .navbar above #top-shadow */ 
} 

Önemli bitler, navbarın yerinde kilitlenmesi için eki davranışını kullanıyorum ve gölgeyi navbarın hemen altındaki yeni bir div'a uygulıyorum. Bence bu, navbarın kendisine doğrudan bir gölge eklemeyi denemenin daha kolay olacağını düşünüyorum.

İyi şanslar!

+0

Teşekkürler Etkisi aldım, ancak şimdi hiçbir bağlantı tıklanabilir değil ve nasıl düzeltileceğine dair hiçbir fikrim yok. – Morki

+0

Güncellenmiş yanıtıma şimdi göz atın. Üst gölgenin üstüne kaldırmak için navona z dizini ayrıntıları ekledim. –

İlgili konular