0

jquery関数から最上位の位置を取得する固定位置のフッターがあります。ウェイポイントを使用して下にスクロールすると、#main が「ビューの下部」になり、フッターの高さを変更できません。誰にもアイデアはありますか？最終的には、これを下にスライドさせて、より多くのフッター コンテンツを表示する必要があります。ここにフィドルがあります固定位置要素の高さをアニメーション化する方法はありますか?

jQueryコードは次のとおりです。

$(function(){
        var position = function () {
            var w = $(window).height();
            var f = $('footer').height();
            var foo = (w-f);
            $('footer').css('top', foo);
        };
        $(document).ready(position);
        $(window).resize(position);

        if (screen.width >= 768){
                $('#main').waypoint(function(direction) {
                    if (direction === 'down') {
                        $('footer').css({'height': "500px"});
                        alert('hit rock bottom');
                    }
                }, { offset: 'bottom-in-view' })
                .waypoint(function(direction){
                    if (direction === 'up') {
                        //$('footer').animate({height:'110px'},300);
                    }
                }, { offset: 'bottom-in-view' });
        }
    });
4

1 に答える 1

1

コードは正しく実行され、フッターには 550 という大きな高さが割り当てられます。ただし、position: fixed残りの高さが画面の下部からはみ出して表示されます。position()高さを調整した後に呼び出すと、問題が解決します。

ここで修正を参照してください: http://jsfiddle.net/VxqNa/

jQuery 関数を使用する場合は、ハンドラーとして使用する関数を渡して、アニメーションの完了後にanimate()呼び出す必要があることに注意してください。例えば：position()complete

$('footer').animate({height:'110px'},300,'swing', position);
于 2013-05-08T04:08:55.420 に答える