1

ここにあるようなナビゲーション バーを再作成するにはどうすればよいですか

ここでスクロールすると、上部にナビゲーション バーが表示されるだけでなく、会社のシンボルがナビゲーション バーにフェードインします。

誰かが私を助けたり、正しい方向に導いてくれませんか?

4

2 に答える 2

4

私はこれを作成しました：

jsBin デモ

jQuery:

var navPos = $('#nav').offset().top;

$(window).scroll(function(){

  var fixIT = $(this).scrollTop() >= navPos;
  var setPos = fixIT ? 'fixed' : 'relative' ;
  var logoSH = fixIT ? 'show' : 'hide' ;
  

  $('#nav').css({position: setPos});
  $('#mini-logo')[logoSH](300);

});

HTML:

 <div id="header">
   
   <h1>Company logo</h1>
   
   <div id="navigation">
     <ul id="nav">
       <li id="mini-logo"><a href="#">LOGO</a></li>
       <li><a href="#">PRODUCT</a></li>
       <li><a href="#">RESOURCES</a></li>
       <li><a href="#">CUSTOMERS</a></li>
       <li><a href="#">SUPPORT</a></li>
       <li><a href="#">COMPANY</a></li>
     </ul>
   </div>
        
  </div>

CSS:

#header{
  background:#eee;
}

#header h1{
  padding:20px;
}

#navigation{
  height:40px;
}
#nav{
  position:relative;
  top:0;
  width:100%;
  list-style:none;
  background:#76A000;
  height:40px;
}

#nav li{  
  float:left;  
}
#nav a{
 text-decoration:none;
  display:block;
  padding:10px 10px;
  color:#fff;
}

#nav li#mini-logo{
  display:none;
  font-weight:bold;
}

トリックは、 の位置を取得する#navことです。ページをスクロールすると、位置が よりも小さい場合に何らかの処理が行われますwindow scrollTop。
その滑らかな効果を実現するには、「ジャンピー」効果を防ぐために、#nav位置を に設定したら、代わりの要素があることを確認する必要があります。 その要素は、子と同じ高さを持つの親です。fixed
nav#navigation

于 2013-01-12T06:45:19.870 に答える
0

これは、スクロール部分を探しているものです

http://pmbennett.net/2010/02/09/fixed-scrolling-navigation/

ロゴをフェードインするには、http: //api.jquery.com/fadeIn/を使用してください。

else { } 内

于 2013-01-12T06:43:27.470 に答える