滾動條上的Twitter bootstrap導航欄陰影

我正在爲Twitter啓動導航欄執行以下操作 http://codepen.io/anon/pen/eIfdn 。它只是在滾動時嚮導航欄添加陰影。任何建議將有助於謝謝你。滾動條上的Twitter bootstrap導航欄陰影

.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，我從上面的js中添加。

下面是我用

$(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}); 
    } 
}); 
})

來源

2013-02-11 Morki

你是否想知道如何做一些你有代碼的東西？ – 2013-02-11 01:36:24

那麼每次我將以下內容添加到引導程序導航欄時，我都不知道我做錯了什麼。 – Morki 2013-02-11 01:57:00

「It break」是一個廣泛的問題。你能告訴我們嗎？ – 2013-02-11 01:57:43

這裏的JS是somenthing讓你開始：
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

#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 */ 
}

重要的是我使用詞綴行爲來鎖定就地的導航欄，並且我將影子應用到剛好在導航欄下方的新div。我認爲這會更容易管理，試圖直接嚮導航欄本身添加陰影。

祝你好運！

來源

2013-02-11 02:51:19

謝謝我得到的效果，但現在沒有任何鏈接是可點擊的，我不知道如何解決它。 – Morki 2013-02-11 03:24:08

現在查看我更新的答案。我向導航欄添加了z-index細節，以將其提升到頂部陰影之上。 – 2013-02-11 12:48:56

滾動條上的Twitter bootstrap導航欄陰影

回答

相關問題