淡出 in/Fade 导航栏

Question

我正在尝试将我的导航栏设置为保持固定并在我向下滚动时淡化到 0.8 不透明度，并在我向上滚动时 return 到他的正常位置和不透明度。

我的jquery代码是：

jQuery(document).ready(function(){

    var navOffset = jQuery("nav").offset().top;

    jQuery(window).scroll(function(){

        var scrollPos = jQuery(window).scrollTop();

        if(scrollPos > navOffset) {
            jQuery("nav").addClass("fixed");
            jQuery("nav").fadeTo(1500,0.5);
        } else {
            jQuery("nav").removeClass("fixed");
            jQuery("nav").fadeTo(1500,1);

        }
    });
});

我的 css 代码是：

.fixed {

    position:fixed;

    top:0;
}

当我向下滚动时它会淡出，但当我向后滚动时它不会 return 到他原来的不透明度 up.I 我是 jQuery 的新手。

Answer 1

还有其他解决方案吗？因为当我向上滚动时，"fadeTo" 操作所花费的时间非常延迟（~4 秒），我认为这不正常。

Answer 2

我认为问题在于您在每次触发 scroll 事件时都设置了 fadeTo 函数。因此，当您向下滚动时，您将向动画效果队列添加许多 "fade out" 次调用。当您向上滚动时，所有 "fade out" 效果（每个效果需要 1.5 秒）必须在第一个 "fade in" 调用发生之前完成。

您可以通过添加对 jQuery 的 .stop(true) 的调用来解决此问题，这样每个滚动事件都会清除动画队列：

jQuery(document).ready(function() {

  var navOffset = jQuery("nav").offset().top;

  jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();
    jQuery("nav").stop(true);

    if (scrollPos > navOffset) {
      jQuery("nav").addClass("fixed");
      jQuery("nav").fadeTo(1500, 0.5);

    } else {
      jQuery("nav").removeClass("fixed");
      jQuery("nav").fadeTo(1500, 1.0);
    }
  });
});

body {
  height: 4096px;
  padding-top: 32px;
}
nav {
  height: 128px;
  width: 100%;
  border: 1px solid black;
  background-color: #00aa00;
}
.fixed {
  position: fixed;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>so</title>
  <meta charset="UTF-8">

</head>

<body>

  <nav></nav>

</body>

</html>

请注意，这意味着 fadeTo 动画在用户停止滚动之前不会发生。

淡出 in/Fade 导航栏

Fade in/Fade out navigation bar

javascript

jquery

css

fade