I am looking to dynamically change my Navbar's position CSS property from Fixed to Relative based on the vertical scroll position.
For example, check out:
Below is the JavaScript code I have tried by toggle classes:
$(function() {
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
header.removeClass('clearHeader').addClass("darkHeader");
}
else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
The issue: This approach does not effectively respond when I zoom in or zoom out.