Я использую начальную панель навигации, и над навигационными ссылками у меня есть текст, который я хочу скрыть, когда пользователь прокручивает страницу вниз. Кроме того, я хочу, чтобы панель навигации была зафиксирована сверху.
Я использую 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();
}
});
});
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
или переменную и т. д.
Определение того, находится ли ваш .navbar
в данный момент в состоянии animation , поможет вам, на основе которого вы можете решить НЕ анимировать.
Просто добавьте следующий фрагмент кода, который использует метод is()
jQuery, и возвращает false
, если .navbar
находится в состоянии анимации:
if($('.navbar').is(':animated')){
return false;
}
Перед применением анимации или слайдов используйте функцию stop, чтобы очистить очередь.
$('div.header').stop();
$('.navbar').stop();
Посмотрите рабочую демонстрацию для своего кода здесь JSfiddle
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.