Question

这是这篇文章的扩展： header gets smaller as you scroll - with the scroll

我添加了一些代码来获取我需要的更多内容，但在此过程中也限制了自己。我需要标题的高度停在100px。我添加了

if( ( $('.header').height() > 100) ){

周围的

$('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));

当它停在100时，当你再次向上滚动时它不会变大。我也正在检查高度是否小于100来制作动画并且它有效，但是当你向上滚动时我还需要反转那个顶级动画

http://jsfiddle.net/9tgDs/1/

Answer 1

好吧，在你的代码中没有任何地方你有滚动条当前位置的if语句。所以现在你没有检测到滚动条何时接近顶部。

您可以添加以下内容：

if ($(this).scrollTop() < 100)
{
    $('.header').height(200 + (200 * $(this).scrollTop() / $('body').height()));
}

您的总JavaScript将如下所示：

var moved = false;

$(window).scroll(function(){ 

    if( ( $('.header').height() > 100) ){
        $('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));
    }

    if( ( $('.header').height() < 170) && !moved){
        $('.header').animate({top:"-40px"});
        moved = true;
    }

    if ($(this).scrollTop() < 100)
    {
        $('.header').height(200 + (200 * $(this).scrollTop() / $('body').height()));
    }

    if( ( $('.header').height() > 170) && moved)
    {
        $('.header').animate({top:"0px"});
        moved = false;
    }

});

您可以在行动中看到这一点 in this jsFiddle 。

此外，您可能想要查看这些教程，而不是自己发明轮子：

How to create a resizing menu bar



Animated Resizing Header On Scroll

更新

您当前的代码有点迟钝，因为它使用高度作为参考，而不是滚动。

由于动画是在滚动时触发的，并且高度的更改是嵌套的副作用，因此您可以更好地坚持scrollTop()位置作为主要输入。

我的意思是：

var moved = false;

$(window).scroll(function(){ 

    if( $(this).scrollTop() < 2000 ){
        $('.header').height(200 - (200 * $(this).scrollTop() / $('body').height()));

        if (!moved && $('.header').height() < 170)
        {
            $('.header').animate({top:"-40px"});     moved = true;  
        } else if (moved && $('.header').height() > 170)
        {
            $('.header').animate({top:"0px"});       moved = false;
        }

    }

});

从 this jsFiddle 可以看出，此代码表现更好！

调整滚动事件的菜单大小

1 个答案:

更新