Seeking assistance with a Bootstrap 4 navbar and header setup. The goal is to have the navbar stick to the top while making the header disappear on scroll.
In my functions.php file, I've enqueued Jquery for this project.
Below is the CSS found in style.css:
.navbar {position:sticky;}
The following script can be located in header.php:
<script>
var $sticknav = $('.navbar');
$(document).scroll(function() {
$sticknav.css({position: $(this).scrollTop()>0 ? "sticky":"fixed"});
});</script>
Based on my understanding, this code should target .navbar and modify the 'position' value from 'sticky' to 'fixed' when the user scrolls back to the top.
However, I'm encountering an issue where the element fails to stick as intended, and the CSS remains unchanged. Any insights on what might be causing this problem?