0
親ロゴ付きの固定ナビゲーションバーをブートストラップで使用する方法を教えてください。 スクロールするとロゴは小さくなりますが、固定のナビゲーションバーでは表示されたままになります。シュートロゴ付きのブートストラップ固定ナビバー、ナビ上段
例えば縮小ロゴとナビゲーションバーのために:https://doemee.zoetermeer.nl
親ロゴ付きの固定ナビゲーションバーをブートストラップで使用する方法を教えてください。 スクロールするとロゴは小さくなりますが、固定のナビゲーションバーでは表示されたままになります。シュートロゴ付きのブートストラップ固定ナビバー、ナビ上段
例えば縮小ロゴとナビゲーションバーのために:https://doemee.zoetermeer.nl
あなたはnav
にブートストラップクラスnavbar-fixed-top
を使用してwindow
スクロールイベントをトリガするために少しjQuery
を追加することによって、これを達成することができます。スクロールアップまたはスクロールアップすると、CSSクラスが切り替わります。
デモ:See here
$(document).ready(function() {
$(window).scroll(function() {
//Method 1: Using addClass and removeClass
//if ($(document).scrollTop() > 50) {
// $('.navbar-default').addClass('navbar-shrink');
//} else {
// $('.navbar-default').removeClass('navbar-shrink');
//}
//Method 2: Using toggleClass
$(".navbar-default").toggleClass("navbar-shrink", $(this).scrollTop() > 50)
});
});
@media screen and (min-width: 992px) {
.navbar-default {
padding: 30px 0;
transition: padding 0.3s;
}
.navbar-default.navbar-shrink {
padding: 10px 0;
}
}
.navbar-default a {
color: #4D4D4D;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-transform: uppercase;
text-decoration: none;
line-height: 42px;
font-weight: 700;
font-size: 20px;
}
.navbar-default a.brand > img {
max-width: 70px;
}
.navbar-default a.active {
color: #2dbccb;
}
.content {
position: absolute;
width: 100%;
height: 100%;
}
.content > section {
width: 100%;
height: 100%;
}
#portfolio {
background: #2dbccb;
}
#about {
background-color: #eb7e7f;
}
#contact {
background-color: #415c71;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://trungk18.github.io/"><img src="trungk18.png" class="img-responsive" title="trungk18" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="top-nav">
<ul class="nav navbar-nav navbar-right">
<li class="page-scroll">
<a href="#portfolio">Portfolio</a>
</li>
<li class="page-scroll">
<a href="#about">About</a>
</li>
<li class="page-scroll">
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<!-- Content Section -->
<div class="content">
<section id="portfolio"></section>
<section id="about"></section>
<section id="contact"></section>
</div>
おかげで、ここでしかロゴは、ボタンの隣にあります。ロゴはナビゲーションの上にとどまらず、固定しなければならず、固定されていなけれ私が提供したサンプルリンクを参照してください。あなたが示したことが私の中で成功し、起こる可能性が最も高いですが、それは私が望むものではありません。 – WillieBoy
私の例で 'jQuery'メソッド1を変更し、' $( '。navbar-default') 'をクラスを追加したい場所に変更してください。 –
私はそれを試して、それは動作しません。 – WillieBoy