У меня проблема с изменением размера div, когда экран находится вверху страницы или где-либо еще.
$(window).scroll(function() {
top = $('html').scrollTop();
setTimeout(
function()
{
if(top == 0)
{
$(".navbar").animate({height:'70px'});
}
else
{
$(".navbar").animate({height:'43px'});
}
}, 100);
});
Div .navbar
меняет размер, пока я прокручиваю вниз, но не достигает исходной высоты, пока экран находится наверху. Как изменить его размер обратно? Также, если у вас есть идеи, как сделать это по-другому - опубликуйте.
Спасибо.
3 ответа
Запускается несколько событий прокрутки, в результате чего эти анимации помещаются в очередь, что может вызвать длительную задержку перед изменением высоты навигационной панели. Попробуйте очищать таймер каждый раз, когда он срабатывает.
var scrollTimer = null;
$(window).scroll(function() {
var top = $(document).scrollTop(); // use document (suggested by seva.rubbo)
// use local var (suggested by Sam Battat)
clearTimeout(scrollTimer);
scrollTimer = setTimeout(
function()
{
if(top == 0)
{
$(".navbar").animate({height:'70px'});
}
else
{
$(".navbar").animate({height:'43px'});
}
}, 100);
});
Fiddle: http://jsfiddle.net/jzsxjw7o/1/
Вы забыли var
вместо top
. И вам лучше использовать $(document).scrollTop()
вместо $('html').scrollTop()
.
$(window).scroll(function() {
var top = $(document).scrollTop();
// ...
});
Проблема в переменной top
, у окна есть свойство top
см. http: //www.w3schools.com/jsref/prop_win_top.asp
Чтобы использовать то же имя, убедитесь, что переменная находится в области действия функции прокрутки следующим образом:
var top = $('html').scrollTop();
Похожие вопросы
Новые вопросы
jquery
jQuery — это библиотека JavaScript. Также рассмотрите возможность добавления тега JavaScript. jQuery — это популярная кросс-браузерная библиотека JavaScript, которая упрощает обход объектной модели документа (DOM), обработку событий, анимацию и взаимодействие AJAX, сводя к минимуму расхождения между браузерами. Вопрос с тегом jQuery должен быть связан с jQuery, поэтому jQuery должен использоваться рассматриваемым кодом, и в вопросе должны быть как минимум элементы, связанные с использованием jQuery.