1

少なくとも 5 ピクセル下にスクロールするとトップ ナビゲーション バーが消え、5 ピクセル上にスクロールすると再び表示されるようにしようとしています。google+ ヘッダーに非常に似ています。チュートリアルを検索しようとしましたが、いくつかの js および jQuery メソッドを試しましたが、それらを機能させることができないようです。My Siteで表示します。

HTML:

<body>
   <div class="gridContainer clearfix">
      <nav id="topNav" class="fluid">
             <ul class="fluid fluidList navSystem">
                <li class="fluid navItem"><a href="#" title="Web">Web</a></li>
                <li class="fluid navItem"><a href="#" title="Photos">Photos</a></li>
                <li class="fluid navItem"><a href="#" title="Videos">Videos</a></li>
                <li class="fluid navItem"><a href="#" title="Music">Music</a></li>
                <li class="fluid navItem"><a href="#" title="People">People</a></li>
                <li class="fluid navItem"><a href="#" title="Places">Places</a></li>
                <li class="fluid navItem"><a href="#" title="Shopping">Shopping</a></li>
                <li class="fluid navItem"><a href="#" title="More">More...</a></li>
        </ul> 
          </nav> <!-- END #topNav -->

          <header id="header" class="fluid">
          </header> <!-- END header -->      
      </div> <!-- END .gridContainer -->
</body>

CSS:

.gridContainer {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   clear: none;
   float: none;
}

#topNav {     
   overflow: hidden; 
   width: 100%;
   height: 29px;
   margin-left: auto;
   margin-right: auto;
   position: fixed;
   top: 0;
   left: 0;
   background-color: #2D2D2D;
   z-index: 999; 
}

#header {
   position: relative;
   width: 100%;
   height: 44px;
   position: fixed;
   background-color: #D2D2D2;
}
4

1 に答える 1

4

それが彼らの側でどのように実装されたかについて、あまり深く調べませんでした。js を使用して、スクロール位置の追跡とそこからの変更のレンダリングを組み合わせて使用​​できます。

var scroll_pos = 0;
var scroll_time;

$(window).scroll(function() {
    clearTimeout(scroll_time);
    var current_scroll = $(window).scrollTop();

    if (current_scroll >= $('#topNav').outerHeight()) {
        if (current_scroll <= scroll_pos) {
            $('#topNav').removeClass('hidden');    
        }
        else {
            $('#topNav').addClass('hidden');  
        }
    }

    scroll_time = setTimeout(function() {
        scroll_pos = $(window).scrollTop();
    }, 100);
});

そして、css クラスを追加する必要があります。

#topNav.hidden {
    display: none;
}

ここで実際に見てください：http://jsfiddle.net/frZ9j/

于 2013-07-26T00:18:45.130 に答える