8

現在、ページがスクロールして設定ポイントを超えるとフッターが表示されますが、現在のように画面に表示されるだけでなく、ユーザーがスクロールすると表示されるようにしたいと考えています。

CSSトランジションまたはベストプラクティスで達成できるかどうかを知りたい.

実際の例 http://jsfiddle.net/robcleaton/3zh6h/

CSS

#footer {
    background: black;
    width: 100%;
    height: 48px;
    position: fixed;
    z-index:300;
    bottom: 0;
    display: none;
}

#footer ul.navigation li {
    float: left;
    margin-right: 16px;
    display: block;
}

<strong>JS

$(function(){
    $(window).scroll(function() {              
        $('#footer').toggle($(document).scrollTop() > 100);
    });
})​

HTML

<div id="footer">
  <div class="content-wrap">
    <ul class="navigation">
      <li><a href="#about">About</a></li>
      <li><a href="#blog">Blog</a></li>
      <li><a href="#support">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div><!-- content-wrap END -->
</div><!-- footer END -->​
4

5 に答える 5

13

CSSトランジションを利用する次のことを行うことができます

jQuery

スクロール位置に応じて、フッターにクラスを追加またはフッターから削除します

$(function(){
    $(window).scroll(function(){  
        if($(document).scrollTop() > 100)
        {    
              $('#footer').addClass("show");
        }
        else
        {
            $('#footer').removeClass("show");
        }
    });
})​

CSS

show次に、CSSを使用して、そのクラスの存在に基づいてフッターを表示または非表示にします。cssトランジションを使用して変更をアニメーション化できます

#footer 
{
    background: black;
    width: 100%;
    height: 0px;
    position: fixed;
    z-index:300;
    bottom: 0;
    overflow:none;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}
#footer.show
{
    height: 48px;

   -moz-transition:all 0.5s ease-in-out;
   -o-transition:all 0.5s ease-in-out;
   transition:all 0.5s ease-in-out;
   -webkit-transition:all 0.5s ease-in-out;
}

上記のように、フッターを表示するときにフッターの高さを変更しています。高さが0のoverflow:none;場合、フッターの内容が表示されなくなります。

この方法では、不透明度の値を設定してフッターをフェードインしたり、色の変化をアニメートしたりすることもできます。

JSフィドル：

http://jsfiddle.net/DigitalBiscuits/3zh6h/5/

于 2012-11-18T14:12:59.323 に答える
0

（fadeIn（）およびfadeOut（） jQueryエフェクトを使用してフッターをアニメーション化できます。

$(window).scroll(function() {           
    if($(document).scrollTop() > 100)
        $('#footer').fadeIn();
    else
        $('#footer').fadeOut();
    });

これらの効果を十分に深く掘り下げると、どちらも不透明度のあるanimate（）効果を使用していることがわかります。

于 2012-11-06T13:40:39.033 に答える
0

私はあなたの問題を実験して楽しんでいましたが、他の誰かがこれを試しているのを見たことがありません( Fiddle ):

$(function() {
    $(window).scroll(function() {
        $("#footer").fadeTo("500", $(document).scrollTop() / 100);
    });
})​

このソリューションは、ユーザーが上にスクロールすると、フッターもフェードアウトします。


このソリューションには大きな欠点が 1 つあります。このfadeTo()方法を使用しているため、IE でのサポートは非​​常に限られます (実際、ほとんどのバージョンの IE では機能しなくなります - 9 と 10 のサポートが何であるか思い出せません)。 . プロパティをアニメーション化するためのサポートを IE に追加する多数のプラグイン/修正プログラムの 1 つを使用して、これを回避し、opacityそれに応じてこのソリューションを変更します (animate()代わりに を使用しますfadeTo())。


ご不明な点がございましたら、お知らせください。幸運を！:)

于 2012-11-20T18:36:36.943 に答える
0

JQuery & アニメーション

このような場合は、スライドとフェードの組み合わせ効果を使用することをお勧めします。はるかに自然に見えるため、発生時にユーザーを不快にさせません。

作業フィドル: http://jsfiddle.net/3zh6h/32/

関連するコード スニペット (フィドルでは使用されませんが、ここではコーディングのベスト プラクティスを念頭に置いてこれを行う方法を示します):

jQuery.fn.slideFadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);  
};

ベストプラクティス

ベスト プラクティスに関しては、カスタム アニメーションと、それらを再利用可能な方法で記述する方法に関する非常に優れた投稿をここで見つけることができます。

少なくとも私が知っている「jqueryフッターアニメーション」のベストプラクティスはありませんが、うまく設計された人気のあるWebサイトから、何が機能し、何が機能しないかを知ることができます. これらの例は、Web サイトの性質とコンテキストに依存するため、適切ではありません。

CSS

仕様が最終決定されていないため、CSS の移行はお勧めしません (公式のドラフト、議論はここで見つけることができます)。

また、特に古いブラウザとのクロスブラウザ互換性はありません。しかし、繰り返しますが、それは私の意見です。

于 2012-11-24T10:14:37.893 に答える
0

私はこれが方法であるべきだと思います：

http://jsfiddle.net/gQqLJ/

$(function() {
    $(window).scroll(function() {
        if ($(document).scrollTop() > 100) {

            $('#footer').slideDown(650);

        }else if($(document).scrollTop() < 100){

            $('#footer').fadeOut(500);
        }
    });
})​;​
于 2012-11-23T20:10:27.820 に答える