6

Twitter ブートストラップ ナビゲーション バーについては、次の http://codepen.io/anon/pen/eIfdnを実行する予定です。スクロール時にナビゲーションバーに影を追加するだけです。アドバイスがあれば助かります。

.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に追加しました。

これが私が使用した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});
  }
 });
})
4

1 に答える 1

11

ここから始めましょう:
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-11T02:51:19.303 に答える