Q:

Navbar to stick to header when scrolling

Hi guys so i am trying to get an effect working were the navbar is in the middle of the page and the user will scroll down , as he hits the navbar it should stick to the top of the page. example of this : here
You can see when the user scrolls down and hits the navbar it stick and its a nice slow effect. 
I got mine to work but it feels cluncky , by that i mean it flicks to the top straight away unlike the example one were its very smooth and it smoothly sticks to the top while mine is very harsh. 

.parallax {
  background-color: Black;
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
  background-color: Red;
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.navbar {
  margin-bottom: 0px;
  left: 0;
  top: 0;
  width: 100%;
  list-style: none;
  height: 70px;
  z-index: 1
}

.navbar-nav {
  float: none;
  margin: 0;
  text-align: center
}

.navbar-nav>li {
  float: none;
  display: inline-block
}

.navbar-nav>li>a {
  line-height: 38px
}

.navbar-nav>li>a.active {
  background-color: #E7E7E7
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #333333;
  background-color: #E7E7E7
}

.navbar-toggle {
  background-color: #000000;
  background-image: none;
  border-radius: 4px;
  float: right;
  margin-bottom: 8px;
  margin-right: 15px;
  margin-top: 18px;
  padding: 9px 10px;
  position: relative
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #2DCC70
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #000000
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: transparent
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="parallax"></div>

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="700">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
       </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#hometab">Home</a></li>
        <li><a href="#section1">About Me</a></li>
        <li><a href="#section2">My Skills</a></li>
        <li><a href="#section3">Portfolio</a></li>
        <li><a href="#section4">Contact Me</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>1>

<div class="parallax1"></div>

Any help would be great.

A:

you just have to add on your style:
.affix + .parallax1 {
  margin-top: 70px;
}

the class .affix indicates that the nav is sticking at the top. So if the .affix is present on nav, you have to set margin or padding to parallax1 so that the HELLO THERE text is not hiding behind the nav.
Editing your fiddle:

.parallax {
  background-color: Black;
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax1 {
  background-color: Red;
  min-height: 700px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Add this */
.affix + .parallax1 {
  margin-top: 70px;
}

.navbar {
  margin-bottom: 0px;
  left: 0;
  top: 0;
  width: 100%;
  list-style: none;
  height: 70px;
  z-index: 1
}

.navbar-nav {
  float: none;
  margin: 0;
  text-align: center
}

.navbar-nav>li {
  float: none;
  display: inline-block
}

.navbar-nav>li>a {
  line-height: 38px
}

.navbar-nav>li>a.active {
  background-color: #E7E7E7
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
  color: #333333;
  background-color: #E7E7E7
}

.navbar-toggle {
  background-color: #000000;
  background-image: none;
  border-radius: 4px;
  float: right;
  margin-bottom: 8px;
  margin-right: 15px;
  margin-top: 18px;
  padding: 9px 10px;
  position: relative
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: #2DCC70
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #000000
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: transparent
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="parallax">

</div>



<nav class="navbar navbar-default" data-spy="affix" data-offset-top="700">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#hometab">Home</a></li>
        <li><a href="#section1">About Me</a></li>
        <li><a href="#section2">My Skills</a></li>
        <li><a href="#section3">Portfolio</a></li>
        <li><a href="#section4">Contact Me</a></li>
      </ul>
    </div>
    <!--/.nav-collapse -->
  </div>
</nav>

<div class="parallax1">
  <h1>
HELLO THERE
 </h1>

</div>

