Question

当用户向上滚动时，我有一个动画菜单进入视图（从顶部）。当用户向下滚动时，动画显示（关闭屏幕）。但是，我希望导航的背景在用户位于页面顶部时为黑色，在距离顶部一定距离后为白色。

html-snippet（工作代码）

...
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

像这样。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: