Question

我希望获得与ibm.com上的标题效果类似的效果。标题本身是固定的。向下滚动时标题会变小。当你滚动它回到正常的高度。

这是我尝试的方式：

$(document).ready(function() {           

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

});

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

Answer 1

看看这里： http://jsfiddle.net/Xvqqb/6/

我略微调整了你的代码。如果用户快速上下滚动，我将取消动画。将标题的位置设置为固定。

<强> JS

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

<强> CSS

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

<强> HTML

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

Answer 2

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

如果原始高度未固定，您可以抓住原始高度并使用data进行存储，然后再收缩。

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

Answer 3

你想要变小的徽标吗？你可能想用jquery-ui用css-class动画来改变高度和其他元素（比如隐藏搜索块）

但如果詹姆斯已经完成了它的高度，但你不需要将它存储在元素的数据中：

$(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，则将其设置为动画一次。

您可能还想使用超时，因此滚动时不会一直触发（建议滚动事件超时）

但要修复main_nav的所有子元素，我的猜测是jquery-ui switchClass http://jqueryui.com/docs/switchClass/可能会修复它。

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

3 个答案: