画面の上部にあるときメニューの背景色を変更する

Question

ユーザーがスクロールアップすると、（上から）表示されるメニューが表示されます。ユーザーがスクロールダウンすると、画面上にアニメーションが表示されます。しかし、ユーザーがページの上部にいるときはナビゲーションの背景を黒にし、上部から一定の距離にあるときは白にします。

、HTMLスニペット（作業コード）

... 
function hasScrolled() { 
if($(window).width() > 768) { 
    var st = $(this).scrollTop(); 
    if (Math.abs(lastScrollTop - st) <= delta) 
     return; 

    if (st > lastScrollTop && st > navbarHeight) { 

     // Scroll Down 
     $('#s-nav').removeClass('nav-down').addClass('nav-up'); 

    } else { 

     // Scroll Up 
     if (st + $(window).height() < $(document).height()) { 
      $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
     } 
    } 
    } else { 
    $('#s-nav').removeClass('nav-up').addClass('nav-down'); 
    } 

HTML

<nav id="s-nav" class="row nav-down"> 
    ... nav menu ... 
</nav> 

CSS

#s-nav { 
position: fixed; 
z-index: 999; 
background-color: #fff; 
top: 0; left: 0; 
width: 100%; 
transition: top 0.5s ease; 
} 
#s-nav.nav-up { top: -75px; } 

Answer 1

このような何か。

$(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= 200) { 
 
    $("#s-nav").addClass('white_bg'); 
 
    } else $("#s-nav").removeClass('white_bg'); 
 
});

body { 
 
    background: #f1f1f1; 
 
    height: 1000px; 
 
} 
 
.nav-down { 
 
    height: 30px; 
 
    width: 100%; 
 
    border: 1px solid #ddd; 
 
    position: fixed; 
 
    background: #000; 
 
    color: #ff0; 
 
} 
 
.white_bg{ 
 
    background: #000; 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<nav id="s-nav" class="row nav-down"> 
 
    ... nav menu ... 
 
</nav>