Я использую начальную панель навигации, и над навигационными ссылками у меня есть текст, который я хочу скрыть, когда пользователь прокручивает страницу вниз. Кроме того, я хочу, чтобы панель навигации была зафиксирована сверху.

Я использую 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();
    }
  });
});
1
pablito.aven 18 Дек 2015 в 17:44

3 ответа

Лучший ответ

Ваша проблема в том, что каждый раз, когда вы прокручиваете, когда scrollTop больше 0, он применяет: -

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

И не только тогда, когда он работает, (height и slideUp). Это заставляет остальное срабатывать несколько раз. смотрите консоль для 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');
    }
  });
});

Скрипка

Или вы можете использовать data или переменную и т. д.

1
BenG 18 Дек 2015 в 15:13

Определение того, находится ли ваш .navbar в данный момент в состоянии animation , поможет вам, на основе которого вы можете решить НЕ анимировать.

Просто добавьте следующий фрагмент кода, который использует метод is() jQuery, и возвращает false, если .navbar находится в состоянии анимации:

  if($('.navbar').is(':animated')){
    return false;
  }

JSFiddle

0
Ahmad Baktash Hayeri 18 Дек 2015 в 15:55

Перед применением анимации или слайдов используйте функцию stop, чтобы очистить очередь.

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

Посмотрите рабочую демонстрацию для своего кода здесь JSfiddle

1
nitish koundade 18 Дек 2015 в 15:13