ブラウザのサイズが小さくなると折りたたまれる静的なナビゲーションがあります。(ブートストラップ 3 ナビゲーション)
今、私はそこにもロゴを持っています。折りたたまれたナビゲーションをユーザーと一緒に下にスクロールしたいのですが、それは機能しています。私はそれにアフィクスを使用しています。しかし、今はロゴを非表示にしたいです。折りたたまれたナビゲーションがスクロールしている間、ロゴを修正する必要があります。私が理解した唯一のことは、いくつかのピクセルを下にスクロールした後にロゴをフェードアウトさせることです. 誰でもアイデアを得ましたか?? HTMLコードは次のとおりです。
<div id="nav">
<div class="navbar navbar-default navbar-static" role="navigation">
<div class="second-nav">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-logo">
<a href="#"><img src="images/Logo_nav.png" alt="DnD"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="mainnav nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#archievements">Leistungen</a></li>
<li><a href="#about">Über uns</a></li>
<li><a href="#team">Team</a></li>
<li class="dropdown">
<a href="#actuell" class="dropdown-toggle disabled" data-toggle="dropdown">Aktuelles<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#actuellall">Alle Artikel</a></li>
</ul>
</li>
<li><a href="#customers">Kunden</a></li>
<li class="dropdown">
<a href="#jobs" class="dropdown-toggle disabled" data-toggle="dropdown">Jobs<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#jobsall">Alle Jobs</a></li>
</ul>
</li>
<li><a href="#contact">Kontakt</a></li>
</ul>
</div>
</div>
</div>
</div>