通过使用jquery设置高度动画向下/向上滑动

我想实现一个效果，这是类似的头上的影响。 标题本身是固定的。向下滚动时，标题会变小。当你滚动 它回到正常高度

我就是这样尝试的：

$(document).ready(function() {           

    $(window).scroll(function(e){
        var scrollTop = $(window).scrollTop();
        if(scrollTop > 50){
                $('.main_nav').animate({
                height:"30px"
            });
        }
    });

});

这会使标题变小。但是我怎样才能使它恢复到正常高度呢？还有其他想法吗

    if(scrollTop > 50){
        $('.main_nav').animate({
            height:"30px"
        });
    }else{
        $('.main_nav').animate({
            height:<OLD HEIGHT>
        });
    }

如果原始高度不是固定的，则可以获取原始高度并在收缩之前使用数据存储它

---

此外，您可能应该跟踪它是否已经缩小，并且只在适当的时候进行动画制作，而不是每次都调用动画制作。

您是否也希望缩小它的徽标？您可能希望使用jqueryui通过css类设置动画，以更改高度和其他元素，如隐藏搜索块

但如果是James所做的高度，但不需要将其存储在元素上的数据中：

$(document).ready(function() {
    var main_nav = $(".main_nav"),
        oldHeight = main_nav.height(),
        scrollUpTo = 30,
        hideHeight = 50,
        w = window;

    $(window).scroll(function(e){
        var scrollTop = $(w).scrollTop();
        setTimeout(function() {
            if(scrollTop > hideHeight  && main_nav.height() !== scrollUpTo ){
                main_nav.stop(/*clearQueue*/true).animate({ height: scrollUpTo });
            } else if(scrollTop < hideHeight  && main_nav.height() !== oldHeight ) {
                main_nav.stop(/*clearQueue*/true).animate({ height: oldHeight });
            }
      }, 100);
    });

});

如果高度不等于旧高度且scrollTop小于50，则对其设置一次动画

您可能还希望使用超时，以便在滚动时不会一直触发建议的滚动事件超时

但要修复主导航的所有子元素，我猜jquery ui switchClass可能会修复它。

看看这里：

我稍微修改了你的代码。 如果用户快速上下滚动，我将取消动画。 将收割台的位置设置为“固定”

JS

CSS

Html

---

​

如果你不想让它排队，你必须像这样：header.stop.animate{height:30px}，{queue:false}第一个参数是动画属性

var header = $('#header')

$(window).scroll(function(e){    
    var scrollTop = $(window).scrollTop();
    if(scrollTop > 50 ){
        header.stop().animate({height:"30px", queue: false});
    }
    else{        
        header.stop().animate({height:"50px", queue: false});
    }
});​

#header {
    height:50px;
    width:716px;
    position:fixed;
    left:0px;
    top:0px;
    background:red;
    z-index: 900;
}

<div id="header"></div>
<div id="bodyContent">
    <div style="height:1000px"></div>     
</div>