Question

当屏幕位于页面顶部或其他任何位置时，我在调整div大小时遇到问题。

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

});

当我向下滚动时，

Div .navbar正在调整大小，但是当屏幕位于顶部时，它没有达到原始高度。如何调整大小？如果你有任何想法如何以不同的方式制作它 - 发布它。

感谢。

Answer 1

您忘记了var top。最好使用$(document).scrollTop()代替$('html').scrollTop()。

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

    // ...

});

Answer 2

问题在于变量top窗口有一个属性top，请参阅http://www.w3schools.com/jsref/prop_win_top.asp

要使用相同的名称，请确保变量位于滚动函数范围内，如下所示：

var top = $('html').scrollTop();

Answer 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);
});

小提琴：http://jsfiddle.net/jzsxjw7o/1/

JQuery如何在向上或向下滚动时调整div的大小

3 个答案: