javascript - JQuery动画和slideUp延迟问题

Question

我正在使用 Bootstrap 导航栏，在导航链接上方有一些文本，我想在用户向下滚动时隐藏这些文本。另外，我希望导航栏固定在顶部。

我正在使用 slideUp() 和 slideDown() 来隐藏/显示导航栏上方的文本，我正在使用 Jquery animate() 修改导航栏的高度。 (由于与此问题无关的 CSS 原因，我需要明确显示高度)

问题是，当我滚动到顶部时，animate() 在 slideDown() 之后排队(也许它没有排队，但它有一些不需要的延迟)，这在向下滚动的情况下不会发生。我希望它们是同时的。

这是一个JSFiddle用最少的代码重现问题。

这里是相关的最小代码:

html:

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="header">
          Atención 24 horas 0800-777-8101
    </div>
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="brand" href="#"><img src="img/logo.jpg" class="logo" /></a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
         <li class="active"><a href="#">DSDSADSA</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">ADSASD</a></li>
        </ul>
      </div>
    </div>
  </nav>

<div style="height:1000px;background-color:#ccc;padding:50px;"></div>

CSS:

.navbar {
  height: 110px;
}
div.header{
  text-align:right;
  height:50px;
}

最重要的是 Javascript:

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      console.log('a');
      $('.navbar').animate({height: '60px'});
      $('div.header').slideUp();
    } else {
      console.log('b');
      $('.navbar').animate({height: '110px'});
      $('div.header').slideDown();
    }
  });
});

Answer 1

您的问题是，每次当 scrollTop 大于 0 时滚动，它都会应用:-

$('.navbar').animate({height: '110px'});
$('div.header').slideDown();

而且不仅仅是当它向上时，(height 和 slideUp)。这会导致 else 多次触发。查看 a

的控制台

解决此问题的一种方法是将类应用到 .header 以确定是否需要应用动画。像这样:-

$(document).ready(function(){
  $(window).scroll(function() {
    if ($(document).scrollTop() > 0 && !$('div.header').hasClass('hide')) {
      console.log('a');
      $('.navbar').animate({height: '60px'}, "fast");
      $('div.header').slideUp("fast").toggleClass('hide');
    } else if ($(document).scrollTop() == 0 && $('div.header').hasClass('hide')) {
      console.log('b');
      $('.navbar').animate({height: '110px'}, "fast");
      $('div.header').slideDown("fast").toggleClass('hide');
    }
  });
});

Fiddle

或者您可以使用data 或变量等。