<!-- 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="http://trungk18.github.io/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;
}
        $(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)
            });
        });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js