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縮小する前に保存するために使用できます。

さらに、毎回 animate を呼び出すのではなく、既に縮小されているかどうかを追跡し、適切な場合にのみアニメーション化する必要があります。

于 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 に答える