2

フッターを常にブラウザーの下部に配置するためのJQueryスクリプトがあります。

問題は、「アニメーション」を使用して強制的に上下に移動することです。これにより、ページが読み込まれるたびにフッターが上から下にスクロールします。フライングフッターバーのように。

「アニメーション」の代わりに、強制的に下部に表示し、スクロール効果で下にドラッグする方法があるのではないかと思っていました。

ここでのコードの抜粋、「。animate」は私が信じる代わりに必要なものです。

 $(window).bind("load", function() { 

   var footerHeight = 0,
       footerTop = 0,
       $footer = $("#Footer");

   positionFooter();

   function positionFooter() {

            footerHeight = $footer.height();
            footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";


           if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               })
           } else {
               $footer.css({
                    position: "static"
               })
           }

   }

   $(window)
           .scroll(positionFooter)
           .resize(positionFooter)

}）;

4

3 に答える 3

4

画面下部の固定位置にフッターを配置するだけです。

#footer { position:fixed; bottom:0px }
于 2012-06-07T21:08:15.443 に答える
0

アニメーションが必要ない場合は、CSSソリューションを利用してください。@lixが述べたように。

#footer { position:fixed; bottom:0px }

一方、アニメーションを使用する場合は、次の2つの方法があります。

  1. JSソリューション

  2. CSS3遷移プロパティ。 

    #footer { 
   position: fixed;
   bottom: 0px;

   -webkit-transition: 3s linear 1s;
   -moz-transition: 3s linear 15s;
   -o-transition: 3s linear 1s;
   -ms-transition: 3s linear 1s;
   transition: 3s linear 1s;
}
于 2012-06-07T21:19:46.407 に答える
0

私はそれを考え出した。「.animate」の遅延を「0」に指定する必要がありました。以下は更新されたコードです。

  if ( ($(document.body).height()+footerHeight) < $(window).height() + 150) {
               $footer.css({
                    position: "absolute"
               }).stop().animate({
                    top: footerTop
               }, 0)
           } else {
               $footer.css({
                    position: "static"
               })
           }
于 2012-06-07T21:47:24.923 に答える