当您滚动时，标题会变小 - 滚动

有很多教程可让您在向下滚动页眉的高度变小时向上滚动某个点时变大。我想知道如何让页眉的高度在您滚动时立即变小，但是随着滚动。所以如果在动画完成之前停止滚动，它也会停止，然后当您恢复向上或向下滚动时，它也会恢复。当您滚动时，标题会变小 - 滚动

这里是不工作在所有我多么希望，但它的代码，我发现动画上滚动小提琴...

http://jsfiddle.net/A3XQG/

$(window).scroll(function(){ 

    var scrollPos = $(window).scrollTop(); 

    if((scrollPos === 0) && (scrollState === 'top')) { 
     $('.header').stop().animate({height: '200px'}, 300); 
     scrollState = 'scrolled'; 
    }  
    else if((scrollPos === 0) && (scrollState === 'scrolled')) { 
     $('.header').stop().animate({height: '50px'}, 300); 
     scrollState = 'top'; 
    } 
});

来源

2014-03-26 mike

你尝试过这么远吗？我们可以给出想法，但是我希望没有人为你编码，因为你没有显示自己编写代码的努力。诀窍在于检测窗口的滚动位置并根据该高度更改高度至指定的最小高度或最大滚动位置 –

已更新问题 – mike

为什么不将滚动位置绑定到.header的css“top”属性？ – astex

你过于复杂了。试试这个：

$(window).scroll(function(){ 
    $('.header').height(200 - (200 * $(this).scrollTop()/$('body').height())); 
});

演示：http://jsfiddle.net/9tgDs/

更新（在150像素帽收缩）

$(window).scroll(function(){ 
    var _height = 200 - (200 * $(this).scrollTop()/$('body').height()); 

    if (_height >= 150) { 
     $('.header').height(_height); 
    } 
});

演示：http://jsfiddle.net/9tgDs/2/

来源

2014-03-26 22:08:30 AlienWebguy

非常感谢。我知道我必须做一个简单的计算，但显然不知道要计算什么。我也只是试图在我自己的网页上有很多的内容和头部不断变小。我将如何阻止比250px更小的高度？再次感谢您的帮助！ – mike

我添加如果（（$（'。header'）。height（）> 150））{围绕你的函数，但当它停在150时，当你回滚时它不会继续变大...... – mike

当然，因为一旦该条件解析为false，则不会执行任何大小调整逻辑。 – AlienWebguy

当您滚动时，标题会变小 - 滚动

回答

相关问题