ナビゲーションバーのヘッダーロゴを非表示にすることはできますが、ブートストラップでスクロールダウンすると表示されますか？

Question

私はちょっと透明な上に透明なNavbarのためにthisのようなものを探していますが、それは透明度を削除し、ロゴやnavbarのブランド名が表示されます。

ブートストラップでこれを行う方法はありますか？どんな助けもありがたいです

Answer 1

スクロールトップの位置を取得し、画像を表示または非表示にすることができます（thisなど）。

$(window).scroll(function(){ 
var scroll = $(window).scrollTop(); 
    if (scroll > 30){ 
    $("#imgLogo").css("display", "inline"); 
    } else { 
    $("#imgLogo").css("display", "none"); 
    } 
}); 

そしてHTML：

<nav class="navbar navbar-fixed-top"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">WebSiteName</a> 
     <img id="imgLogo" src="https://getbootstrap.com/apple-touch-icon.png" width="40"/> 
    </div> 
    </div> 
</nav> 

<div class="body"> 
Bottom 
</div> 

Answer 2

私は、ブートストラップについてはよく分からないが、あなたは、あなたの質問にはJavaScriptタグを持っているので、私はjavascriptの答えを提供します。 :)

DOMでは、ウィンドウオブジェクトのスクロールイベントにイベントリスナーを追加します。その後、イベントリスナーが起動するたびに、スクロール値を評価する条件文を持つjavascript関数が呼び出されます。ゼロ以外の場合は、透明度を削除します。あなたはスムーズな移行がちょうどこの

#navbar{ 
    /*remember vendor prefixes for transition-duration!*/ 
    transition-duration: 5s; 
}