0

我想实现类似于ibm.com上的标题效果的效果。标头本身是固定的。当您向下滚动时，标题会变小。当您向后滚动时，它会获得正常高度。

这就是我尝试的方式：

$(document).ready(function() {           

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

});

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

4

3 回答 3

5

看看这里：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>

​</p>

于 2012-04-18T14:13:14.627 回答
1 
    if(scrollTop > 50){
        $('.main_nav').animate({
            height:"30px"
        });
    }else{
        $('.main_nav').animate({
            height:<OLD HEIGHT>
        });
    }

如果原始高度不固定，可以抓取原始高度并data在收缩前使用存储。

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

于 2012-04-13T17:12:49.963 回答
1

它是你想要变小的标志吗？您可能想使用 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/可能会修复它。

于 2012-04-18T13:47:52.330 回答