當在屏幕頂部時更改菜單背景色

當用戶向上滾動時，我有一個菜單可以將視圖（從頂部）移動到視圖中。當用戶向下滾動時，可以動畫（屏幕外）。但是，我希望導航的背景在用戶位於頁面頂部時變爲黑色，而在距離頂部有一定距離後爲白色。當在屏幕頂部時更改菜單背景色

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; }

來源

2016-11-14 user3550879

你能提供工作'snippet'或'fiddle'？ –

大部分內容是通過wordpress創建的。當我嘗試 – user3550879

時，Snippet無法識別代碼，因爲您在滾動時切換類，那麼您也可以使用這些類來切換'bg-color'。 –

這樣的事情。

$(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>

來源

2016-11-14 06:16:43

因此，我可以在當前的代碼之後添加此代碼？ – user3550879

還有一個問題，可以這樣做，以便CSS不硬編碼，而是應用一個CSS類？以及如何將第二個類添加到另一個內部div。（等當背景是白色的我需要改變文字爲黑色） – user3550879

完美的得到它的工作，謝謝 – user3550879

當在屏幕頂部時更改菜單背景色

回答

相關問題