I have a simple jQuery code snippet that is supposed to make the navigation element sticky by applying a class with position: fixed. However, I'm facing an issue on my Commerce platform where the fixed position property doesn't seem to work correctly. The navigation becomes fixed within its header area only, instead of staying with the user as they scroll down the page. You can check it out here: .
Even after scrolling slightly, the navigation remains improperly fixed. Below is the CSS and JavaScript/jQuery code snippets I am currently using:
CSS
.fixed {
top: 0 !important;
z-index: 100 !important;
position: fixed !important;
transition: all 0.3s;
background-color: #000000;
opacity: 0.9;
}
JavaScript/jQuery
<script>
var num = 40;
jQuery(window).bind('scroll', function () {
if (jQuery(window).scrollTop() > num) {
jQuery('.navigation').addClass('fixed');
} else {
jQuery('.navigation').removeClass('fixed');
}
});
</script>
If anyone could provide insights into what might be going wrong and causing the navigation element not to fix properly, I would greatly appreciate it. Thank you.