Question

我正在尝试设置我的导航栏以保持固定并在我向下滚动时淡入0.8不透明度，并在我向上滚动时返回到其正常位置和不透明度。

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

当我向下滚动但当我向后滚动时它没有恢复到原来的不透明度时，它会淡出。我是jQuery的新手。

Answer 1

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

您可以通过添加对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动画。

Answer 2

还有另一种解决办法吗？因为当我向后滚动时间为'＃34; fadeTo＆＃34;行动被推迟（约4秒）我不认为这是正常的。

淡入/淡出导航栏

2 个答案: