Question

我有一个包含标题和菜单的固定菜单，在向下滚动菜单时会消失，然后在用户停止滚动时重新出现。

我还有一个背景图片，我正在为背景位置y设置动画。我遇到的问题是菜单消失并重新出现，但背景图像的动画效果为-70px，但在菜单出现时没有动画回到0px。

我做了JSFiddle。

以下是网站的剥离代码： -

HTML

<body>
  <div id="header-wrapper">

    <div id="branding-wrapper">

    </div>
    <a href="#!">
      <div id="inone-wrapper"></div>
    </a>
    <div id="navbar-wrapper">

    </div>
  </div>
</body>

的jQuery

$(document).ready(function($) { 
    var $menu = $("#navbar-wrapper");
    var opacity = $menu.css("opacity");
    var scrollStopped; 

var fadeInCallback = function() {
      if (typeof scrollStopped != 'undefined') {
        clearInterval(scrollStopped);
      }
      scrollStopped = setTimeout(function() {
        $menu.slideDown({
          duration: 300,
          easing: 'linear'
        });
        $('#inone-wrapper').animate({
          'background-position-y': '0'
        });
        $('#branding-wrapper').css('background', 'rgba(255,255,255,1)');
      }, 800);
    }

    $(window).scroll(function() {
      if (!$menu.is(":animated") && opacity == 1 && $(window).scrollTop() > 130 && $('#navbar').not('.in') && ($(window).width() >= 992)) {
        $menu.slideUp({
          duration: 300,
          easing: 'linear',
          complete: fadeInCallback
        });
        setTimeout(function() {
          $('#inone-wrapper').animate({
            'background-position-y': '-70px'
          });
        }, 200);
        $('#branding-wrapper').css('background', 'rgba(255,255,255,0.9)');
      } else {
        fadeInCallback.call(this);
      }
    });
});

Answer 1

您的问题来自动画队列填满。那么接下来发生的事情是jQuery需要时间才能赶上自己。你#inone-wrapper是阻碍事情的地方 - 它会将背景位置重复设置为-70px，所以如果你包括以下内容你应该没问题：

$('#inone-wrapper').stop(true, true).animate({ });

由于您使用的是.scroll()事件，因此会有很多滚动事件，因此可以非常快速地调用这些函数。您需要做的是，在开始动画之前，您需要清除动画队列，并使用jQuery的.stop()函数完成上一个动画并传递true, true。 .stop()的默认值为false, false

.stop( [clearQueue ] [, jumpToEnd ] ) https://api.jquery.com/stop/

小提琴 - https://jsfiddle.net/pwLquf3h/7/

$(document).ready(function($) { 
    var $menu = $("#navbar-wrapper");
    var opacity = $menu.css("opacity");
    var scrollStopped; 

var fadeInCallback = function() {
      if (typeof scrollStopped != 'undefined') {
        clearInterval(scrollStopped);
      }
      scrollStopped = setTimeout(function() {
        $menu.slideDown({
          duration: 300,
          easing: 'linear'
        });
        $('#inone-wrapper').animate({
          'background-position-y': '0'
        });
        $('#branding-wrapper').css('background', 'rgba(255,255,255,1)');
      }, 800);
    }

    $(window).scroll(function() {
      if (!$menu.is(":animated") && opacity == 1 && $(window).scrollTop() > 130) {
        $menu.slideUp({
          duration: 300,
          easing: 'linear',
          complete: fadeInCallback
        });
        setTimeout(function() {
          $('#inone-wrapper').stop(true, true).animate({
            'background-position-y': '-70px'
          });
        }, 200);
        $('#branding-wrapper').css('background', 'rgba(255,255,255,0.9)');
      } else {
        fadeInCallback.call(this);
      }
    });
});

滚动时滑动幻灯片，非活动时滑动幻灯片

1 个答案: