$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
$('#s-nav').addClass('stick');
}
if ($(window).scrollTop() < 300) {
$('#s-nav').removeClass('stick');
}
});
});
#s-nav {
position: relative;
background: cyan; /* For clarity */
}
#s-nav.stick {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="s-nav">
Sticky
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec tellus justo. Phasellus sollicitudin nisl pellentesque tincidunt consequat. Cras pellentesque quis turpis ac ultricies. Curabitur tincidunt sapien eget elit faucibus vestibulum. Nulla feugiat tempor magna, vitae aliquet sapien pretium vel. Nullam dapibus sagittis diam, at mattis ipsum congue sit amet. Suspendisse pulvinar nulla in dui hendrerit, at porta turpis consectetur. Quisque fermentum augue a libero posuere, at commodo odio porttitor. Mauris a dui at augue sollicitudin mattis. Vestibulum luctus interdum nisi, ac aliquet enim tristique sed. Etiam blandit massa risus, vel semper ligula ultricies non. Vivamus suscipit augue vel congue ultricies. Donec ac ipsum lacinia, commodo enim vitae, dignissim sem. Proin scelerisque feugiat sem, eu elementum orci viverra nec. Proin tincidunt eleifend lorem scelerisque pulvinar.
Morbi varius lacinia lacinia. Vivamus facilisis ornare justo, in porttitor ipsum pulvinar id. Sed rutrum, ante et consequat scelerisque, nulla sem cursus lacus, non convallis massa justo in velit. Ut porttitor fermentum augue, non rhoncus sem semper eu. Curabitur id semper mauris. Pellentesque sit amet diam vel mauris blandit euismod sit amet ac magna. In sodales iaculis magna nec viverra.
Fusce congue urna sed nisi efficitur aliquet. Duis augue metus, aliquam lobortis ultrices laoreet, pulvinar in arcu. Suspendisse feugiat ex velit, ut elementum nisi luctus id. Cras condimentum sapien nec ante interdum, at tempus lorem gravida. Curabitur porttitor eros massa, vel varius turpis accumsan a. Sed porttitor convallis odio, vitae dapibus eros venenatis ut. Donec scelerisque metus molestie erat bibendum condimentum.
Nullam porttitor semper aliquam. Mauris volutpat augue ac diam tincidunt, at ullamcorper sapien laoreet. Nunc porta bibendum lacus imperdiet luctus. Proin ac massa commodo, egestas dui vehicula, bibendum arcu. Vivamus sed pulvinar nisi. Duis orci lectus, pulvinar sed consequat eget, vulputate at turpis. Praesent laoreet ligula nunc, id sollicitudin nisl volutpat sit amet. Vestibulum quis porttitor eros. Praesent in turpis justo. Vivamus pharetra porttitor neque quis maximus. Vestibulum ut euismod nisi. Aenean sit amet accumsan magna. Vestibulum dictum, augue quis commodo dapibus, nibh elit auctor arcu, id tempus libero diam non justo.
Maecenas urna leo, vehicula in turpis non, maximus mattis enim. Fusce sit amet est rutrum, posuere velit in, iaculis nunc. Fusce malesuada at felis a tincidunt. Nam maximus dictum vestibulum. Sed scelerisque eget nibh eget suscipit. Nulla lacus diam, tristique et justo quis, venenatis suscipit arcu. Etiam vestibulum at libero quis eleifend.
</p>