0

ページの上部に固定されているdivがあり、Webサイトへのナビゲーションを保持しています。高さは175pxです。このDIVは、ページを下にスクロールしても表示されたままになります。

ユーザーがページを175ピクセル下にスクロールしたときに、このdivを90ピクセルの高さに縮小し、ページを下にスクロールしても90ピクセルのままにしておきたいと思います。一番上までスクロールして戻ると、DIVを元の175pxの高さに戻したいと思います。

そうするときにこれをアニメーション化して（できれば上にスライドして下にスライドさせて）、CSS3を使用してアニメーション化したいと思います...

これは私がこれまでに持っているもののフィドルですが、私はクエリ初心者なので、物事をどうやって進めるのかわかりません… http://jsfiddle.net/bnsUB/

編集： コンテナが上下にスライドする間にパディングなどを調整する必要があるコンテンツもこのDIV内にあることを忘れました。したがって、これらのパディング値も縮小/拡大できる場合、それは追加のボーナスになります

4

3 に答える 3

3

$.scrollTop()ウィンドウの現在の値に基づいてアクションをトリガーする必要があります。

何かのようなもの：

$(document).scroll(function(){
    if ($(this).scrollTop()>175){
        // animate fixed div to small size:
        $('.wrapper').stop().animate({ height: 90 },100);
    } else {
        //  animate fixed div to original size
        $('.wrapper').stop().animate({ height: 175 },100);
    }
});

ここに行きます： http://jsfiddle.net/bnsUB/4/

他のもの (パディングやマージンなど) をアニメーション化する場合は、それらを.animate()関数に渡すオブジェクトに値として追加するだけです。(例えば -{ height: 175, 'padding-top': 20, 'margin-top': 10 }など)

于 2012-08-29T09:32:47.537 に答える
0 
$(window).scroll(function()
{
    if  ($(window).scrollTop() == $(document).height() - $(window).height())
      {
        $('#tt').animate({height:'90px'}, 500);
      }

});
于 2012-08-29T09:41:09.050 に答える