After creating a script to implement a sticky menu on scroll, I encountered a bounce "bug" and decided to make it fade in/out for a smoother effect. However, I'm struggling to get it to work properly...
This is the HTML code:
<headnav>
<nav>
<ul>
<li>Home</li>
<li>About</li>
</ul>
</nav>
</headnav>
The CSS style:
.fixedd {
position: fixed;
top: 0;
}
headnav {
background: #fff;
width: 100%;
line-height: 100%;
position: absolute;
top: 290px;
left: 0;
z-index: 99998;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-width: 1px;
opacity: 0.9;
filter: alpha(opacity=90); /* For IE8 and earlier */
}
And the jQuery script:
jQuery(document).ready(function($){
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 290) {
$('headnav').addClass('fixedd');
} else {
$('headnav').removeClass('fixedd');
}
});
I attempted to add fade in/out effects but they are not functioning as expected. Any suggestions on what might be causing this issue? Thank you!