У меня проблема с изменением размера div, когда экран находится вверху страницы или где-либо еще.

$(window).scroll(function() {
    top = $('html').scrollTop();
    setTimeout(
    function() 
    {
        if(top == 0)
        {
            $(".navbar").animate({height:'70px'});
        }
        else
        {
            $(".navbar").animate({height:'43px'});
        }
    }, 100);

});

Div .navbar меняет размер, пока я прокручиваю вниз, но не достигает исходной высоты, пока экран находится наверху. Как изменить его размер обратно? Также, если у вас есть идеи, как сделать это по-другому - опубликуйте.

Спасибо.

2
Dominik Dominik 16 Дек 2014 в 00:25

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/

0
Scott McDermid 15 Дек 2014 в 21:47

Вы забыли var вместо top. И вам лучше использовать $(document).scrollTop() вместо $('html').scrollTop().

$(window).scroll(function() {
    var top = $(document).scrollTop();

    // ...

});
0
Seva Arkhangelskiy 15 Дек 2014 в 21:34

Проблема в переменной top, у окна есть свойство top см. http: //www.w3schools.com/jsref/prop_win_top.asp

Чтобы использовать то же имя, убедитесь, что переменная находится в области действия функции прокрутки следующим образом:

var top = $('html').scrollTop();
0
Sam Battat 15 Дек 2014 в 21:34