<!-- 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.conm/"><img src="http://trungk18.com/img/trungk18.png" class="img-responsive" title="trungk18" alt="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>
@media screen and (min-width: 1170px) {
.navbar-default {
padding: 30px 0;
transition: padding 0.3s;
&.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;
&.brand {
> img {
max-width: 70px;
}
}
&.active {
color: #2dbccb;
}
}
}
.content {
position: absolute;
width: 100%;
height: 100%;
> section {
width: 100%;
height: 100%;
}
}
#portfolio {
background: #2dbccb;
}
#about {
background-color: #eb7e7f;
}
#contact {
background-color: #415c71;
}
View Compiled
$(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)
});
});