Question

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

我使用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

在应用动画或幻灯片之前，请使用stop功能清除队列。

$('div.header').stop();
$('.navbar').stop();

在此处查看代码的工作演示JSfiddle

Answer 2

您的问题是，每次当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或变量等

Answer 3

确定您的m当前是否处于动画的状态将会起作用，您可以根据该技巧决定不动画。

只需添加以下使用jQuery的.navbar方法的代码段，如果is()处于动画状态，则返回false：

.navbar

JSFiddle

JQuery动画和slideUp延迟问题

3 个答案: