score:1

Accepted answer

May be this what you need? Let me know if you need something else. I have modified script to remove that jump you are telling. I have removed the classes when you reach header scrolling up all the way.

/* Fixed Header Parallax */
  var header_height = $('header').outerHeight(); //number of pixels before modifying styles
  var offset = $('header').offset();
  
  $(window).bind('scroll', function () {
  
  var scrollTop = $(window).scrollTop();
    if (scrollTop > header_height) {
      $('header').addClass('nav_fixed');
      $('.dummyHeight').addClass('addHeight');
    } else if(scrollTop == offset.top) {
      $('header').removeClass('nav_fixed');
      $('.dummyHeight').removeClass('addHeight');
    }
  });
body{
  margin: 0;
}
.main {height:700px;}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}
/* Header */
header {
  background: red;
  height: 80px;
  padding: 10px 40px;
  border-bottom: 1px solid #caccd0;
  position: relative;
  transition: all 0.3s linear;
}

.nav_fixed {
  position: fixed;
  z-index: 45;
  left: 0;
  right: 0;
  top: 0;
  animation-name: fade-in;
  animation-duration: 1s;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.addHeight {
  height: 80px;
  width: 100%;
  display: block;
  margin: 0 auto;
  position: relative;
}

nav ul li {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
nav ul li a {
  display: block;
  color: #232323;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 12px;
  padding: 0 10px;
  line-height: 67px;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>


<header>

    Sample

    <div id="nav_area">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </nav>
    </div>
</header>
<div class="dummyHeight"></div>

<div class="main">

</div>
</body>
</html>


Related Query

More Query from same tag