スクロール時のロゴのサイズ変更

Question

私は、ページをスクロールダウンするときに、次のコードを使用してロゴのサイズを変更しました。

$(document).on('scroll', function() { 
 
    if ($(document).scrollTop() >= 10) { 
 
    $('.logo img').css('width', '50px'); 
 
    } else { 
 
    $('.logo img').css('width', ''); 
 
    } 
 
});

.nav { 
 
    position: fixed top: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.nav .logo { 
 
    position: fixed; 
 
    text-align: left; 
 
    z-index: 2; 
 
    top: 0; 
 
    overflow: hidden; 
 
    opacity: .5; 
 
} 
 

 
.container { 
 
    padding-top: 120px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <div class="logo"> 
 
    <a href="index.html"><img src="http://placehold.it/100x100" alt="" /></a> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    Lorem ipsum 
 
</div>

Iは、遷移が大から小へ滑らかになりたいです。

https://jsfiddle.net/sL89qxcx/

私はスムーズな移行を実現するために追加することができます何かがありますか？あなたのための

Answer 1

これを達成する最善の方法は、ハードウェアアクセラレーションが強化されていることと、より良い懸念事項の分離であるため、CSSトランジションを使用することです。 JS内のクラスを追加/削除することでアニメーションを切り替えることができます。

重要な部分はwidthとtransitionの両方の規則を.logo img要素のデフォルト状態に追加することです。追加されたクラスにそのwidthを修正することができます。これを試してみてください：

$(document).on('scroll', function() { 
 
    $('.logo img').toggleClass('small', $(document).scrollTop() >= 10); 
 
});

.nav { 
 
    position: fixed top: 0; 
 
    z-index: 1; 
 
    width: 100%; 
 
} 
 

 
.nav .logo { 
 
    position: fixed; 
 
    text-align: left; 
 
    z-index: 2; 
 
    top: 0; 
 
    overflow: hidden; 
 
    opacity: .5; 
 
} 
 

 
.nav .logo img { 
 
    width: 100px; 
 
    transition: width 0.3s; 
 
} 
 

 
.nav .logo img.small { 
 
    width: 50px; 
 
} 
 

 
.container { 
 
    padding-top: 120px; 
 
    height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="nav"> 
 
    <div class="logo"> 
 
    <a href="index.html"><img src="http://placehold.it/100x100" alt="" /></a> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    Lorem ipsum 
 
</div>

Answer 2

いくつかのポインタ：一般的なルール（例外はもちろん、適用されます）として.css()を使用してスタイルを設定する

は避けてください。その代わりに、CSSでクラスを定義することを検討してください。 .small-logo {width:8%}、代わりに.addClass()を使用してください。

これは、クラスが既に追加されている場合は、再度追加されないという便利な副作用があります。

これにより、ロゴのスタイルにtransition: width 0.4 ease-in-out;などを設定することができます。これはあなたが求めているスムーズな移行を提供します。

CSSは楽しいです！