当在屏幕顶部时更改菜单背景色

当用户向上滚动时，我有一个菜单可以将视图（从顶部）移动到视图中。当用户向下滚动时，可以动画（屏幕外）。但是，我希望导航的背景在用户位于页面顶部时变为黑色，而在距离顶部有一定距离后为白色。当在屏幕顶部时更改菜单背景色

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

当在屏幕顶部时更改菜单背景色

回答

相关问题