Trying to implement a sticky navbar on my "Lexus Extroic" opencart template has proven to be quite challenging. Here is the code snippet I have been using:
<script>
$(document).ready(function() {
$(document).scroll(function () {
var scroll = $(this).scrollTop();
var topDist = $("#header-layout").position();
if (scroll > topDist.top) {
$('nav').css({"position":"fixed","top":"0"});
} else {
$('nav').css({"position":"static","top":"auto"});
}
});
});
</script>
Unfortunately, the desired result has not been achieved. You can view the current outcome on this page:
Here is how the original template looks: