1

私はjQueryにかなり慣れていないので、スクロールに応じて高さが可変のページの上部に固定されたナビゲーションメニューを作成しようとして数日が経ちましたが、これまでのところ、これがどのように行われるかを理解するのに苦労しています動作します。CSS Transition だけで効果をシミュレートすることができましたが、それは私が望むものではありません。

ここに私が達成しようとしていることの完璧な例があります: www.bulo.com とここ: http://d.pr/i/fqaB

Bulo.com のコードを調べたところ、理解するのが非常に難しいことがわかりました。なぜなら、明らかにすべてを機能させる部分が jQuery.js 内にあり、スペースや改行がまったくない状態ですべて圧縮されているため、気が狂ってしまうからです。

私が重要だと思ったものを削除しました：

HTML:

<header class="mod-header" data-target-padding="40">
  <div class="container">
    <nav class="navigation">
      <ul>
          <li class="nav-item">
            <a href="collections.html">Collections</a>
          </li>
          <li class="nav-item">
            <a href="products.html">Products</a>
          </li>
          <li class="nav-item">
            <a href="for-sale.html">For sale</a>
          </li>
      </ul>
    </nav>
  </div>
</header>

CSS:

.mod-header {
background-color: #FFFFFF;
border-bottom: 1px solid #DDDDDD;
z-index: 901;
}
.mod-header .navigation {
text-align: center;
}
.mod-header .navigation ul {
display: inline-block;
margin: 0;
overflow: visible;
padding: 0;
text-align: center;
}
.mod-header .navigation li {
display: block;
float: left;
height: 18px;
margin: 0;
overflow: visible;
padding: 64px 0;
position: relative;
z-index: 910;
}
.mod-header .navigation li a {
color: #171617;
display: inline-block;
font-family: 'Droid Sans',sans-serif;
font-size: 18px;
height: 18px;
margin: 0 20px;
text-align: center;
text-decoration: none;
}
.mod-header.mod-header-fixed {
left: 0;
margin: 0;
position: fixed;
top: 0;
width: 100%;
}

jquery.js ファイルは非常に巨大なので投稿しませんが、Firebug または Safari の Inspect Element を使用して簡単に確認できます。

それで、誰か私にそれを説明できますか？

前もって感謝します。

4

1 に答える 1

1

ページが70pxmod-header-fixed下にスクロールされたときにそのナビゲーション バーにクラスを追加し、ページが下にスクロールされたときにクラスを削除するだけで済みます。

次の jQuery の例は、その種のイベントを簡単にキャッチし、必要なことを実行します。

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
            $(".navigation").addClass("mod-header-fixed");
         } else if ($(window).scrollTop() < 70) {
            $(".navigation").removeClass("mod-header-fixed");
         }
    });
});

jsFiddle の例

.scrollTop()メソッドの詳細については、 jQuery API ドキュメントを参照してください。

編集1：

圧縮されたコードは読めないとおっしゃいましたか？読み込めないコードをJavaScript Beautifierにコピー アンド ペーストして、読みやすいバージョンを入手してください。

編集2：

オブジェクトを変更したい場合は、メソッドを使用してパディングプロパティを.height()操作できます。.animate()

$(document).ready(function(){
     $(window).scroll(function(){
         if ($(window).scrollTop() > 70){
             $(".navigation").addClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "45px 0"
             }, 600 );
         } else if ($(window).scrollTop() < 70) {
             $(".navigation").removeClass("mod-header-fixed");
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
             $(".mod-header .navigation li").stop().animate({ 
                padding: "15px 0"
             }, 600 );
         }
     });
 });

jsFiddle の例

于 2013-10-29T18:33:22.597 に答える