Sticky Nav Flickering

On scroll sticky nav flickers and prevents scroll

by WeebleWobb

HTML

<header>
		<div class="top-nav container-fluid">
			<div class="container">
				<img src="https://placehold.it/150x75">
				<a href="http://www.cslbehring.com">cslbehring.com</a>
			</div>
		</div>
		<nav>
			<div class="main-nav">
				<ul>
					<li>
						<a href="overview.html">SCP Overview</a>
					</li>
					<li>
						<a href="development.html">Development Process</a>
					</li>
					<li>
						<a href="strengths.html">Franchise Profile</a>
					</li>
					<li>
						<a href="audiences.html">Strategic Approach</a>
					</li>
					<li >
						<a href="communication.html">Communication Platform</a>
					</li>
					<li>
						<a class="nav-link" href="lexicon.html" class="nav-link">Lexicon</a>
					</li>
				</ul>
			</div>
		</nav>
	</header>
 <main>
				<div>
					<div>
						<h1>Section Title</h1>
						<h4>Section Subhead</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat tortor non dictum vestibulum. Nulla orci magna, aliquam nec tempus quis, pretium vitae felis. Nam tempor sodales urna. Praesent quis justo eu velit ullamcorper facilisis venenatis porttitor lorem. Ut eget metus eu quam gravida hendrerit.</p>
					</div>
				</div>
				<hr>
				<div>
					<div>
						<h2>Section Title</h2>
						<h5>Section Subhead</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat tortor non dictum vestibulum. Nulla orci magna, aliquam nec tempus quis, pretium vitae felis. Nam tempor sodales urna. Praesent quis justo eu velit ullamcorper facilisis venenatis porttitor lorem. Ut eget metus eu quam gravida hendrerit.</p>
					</div>
					<div>
						<h2>Section Title</h2>
						<h5>Section Subhead</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque placerat tortor non dictum vestibulum. Nulla orci magna, aliquam nec tempus quis, pretium vitae felis. Nam tempor sodales urna. Praesent quis justo eu velit ullamcorper facilisis venenatis porttitor lorem. Ut eget...

CSS

.main-nav {
	background-color: #006a65;
  padding: 10px 0 20px;
  overflow: hidden;
}

.main-nav li {
  float: left;
  margin: 0 20px;
}

.main-nav a {
	color: #fff;
	text-decoration: none;
}

.navbar-fixed-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

.top-nav {
  background-color: #fff;
  padding: 20px 10px;
}

.top-nav a {
  float: right;
}

JavaScript

// Side navigation Sticky function
	$(window).scroll(function() {
		var top = $(window).scrollTop();
		
		if(top >= 200) {
			$('header').addClass('navbar-fixed-top')
		} else {
			$('header').removeClass('navbar-fixed-top')
		}
	});