開始およびスクロールに基づいてメニューを表示および非表示にする方法

Question

ページに2つのメニューがあり、ページが読み込まれるときに1つを表示しようとしていて、スクロールがあるときにもう1つを表示しようとしています。 これは私のページですLink

トップ位置

これが現在

を何をしようとしていますされ、過去のスクロールがあるとき、私は位置がトップ と青の部分にあるときの白い部分を表示したいと思います

<script type="text/javascript" src="//code.jquery.com/jquery-git.js"></script> 
<script type='text/javascript'>//<![CDATA[ 
$(function(){ 
// Hide Header on on scroll down 
var didScroll; 
var lastScrollTop = 0; 
var delta = 5; 
var navbarHeight = $('header').outerHeight(); 

$(window).scroll(function(event){ 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     hasScrolled(); 
     didScroll = false; 
    } 
}, 250); 

function hasScrolled() { 
    var st = $(this).scrollTop(); 

    // Make sure they scroll more than delta 
    if(Math.abs(lastScrollTop - st) <= delta) 
     return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight){ 
     // Scroll Down 
     $('header').removeClass('nav-bar-below op-page-header cf').addClass('banner include-nav'); 
    } else { 
     // Scroll Up 
     if(st + $(window).height() < $(document).height()) { 
      $('header').removeClass('banner include-nav').addClass('nav-bar-below op-page-header cf'); 
     } 
    } 

    lastScrollTop = st; 
} 
});//]]> 

</script> 

は、いくつかのいずれかは、スクロールイベントが発生したときにスクロールがページの上部にあるか、ない場合は、単に検出することができ、そのは私

Answer 1

のために働いていない助けてくださいすることができます。そうならば、あなたはときに、ページ最初の負荷を確認する必要があり、白ヘッダーを表示し、その逆ももちろん

$(window).scroll(function() { 
    var scrollPosition = $(window).scrollTop(); 

    if(scrollPosition === 0) { 
     //show white header 
    } 
    else { 
     //show blue header 
    } 
} 

、それが白いの最初の（使用CSS）を示しています。このため上記のコードは、ユーザまで実行されませんので、スクロールを行う（火このイベント）

* EDIT

：

「と青い部分、トップの位置までスクロールがあります」

このプラグインを試すことができます http://stickyjs.com/

Answer 2

トップの位置にメニューを修正するサンプルコードです。

$(document).scroll(function() { 

var y = $(document).scrollTop() 
var header = $('.include-nav'); 
var blue-menu = $('.cf'); 
var screenHeight = header.height(); 
if (y >= screenHeight) { 
    blue-menu.css({ 
     position : "fixed", 
     "top" : "0", 
     "left" : "0" 
    }); 
    header.css("position", "relative"); 
} else { 
    blue-menu.css("position", "relative"); 
} 
});