I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enough, it works fine on jsfiddle but not on my actual website.
For reference, here is the jsfiddle link.
CSS
#background {
background: lightblue;
background-position:center top;
}
p {
font-size:15px;
padding-top:100px;
padding-left:100px;
padding-right:100px;
}
.rotate {
float: left;
-webkit-transform: rotate(180deg) 2s;
transform: rotate(180deg) 2s;
transition: all 2s ease;
transition-delay: 0.4s;
}
...
...
...
<p>HTML</p>
<pre><code> <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Exo:200|Open+Sans:300|Quicksand|Roboto+Condensed|Shadows+Into+Light" rel="stylesheet">
(Html code continues...)
jQuery
jQuery(function($) {
function fixDiv() {
// jQuery code for fixing the navigation
}
$(window).scroll(fixDiv);
fixDiv();
});
If anyone can offer assistance, it would be greatly appreciated! 😄