My goal is to implement a sticky header that appears when the user scrolls down and the original header disappears. Here is the current script I'm using:
$(function(){
// Check the initial Position of the Sticky Header
var stickyHeaderTop = $('#sticky').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
//$('#sticky').css({position: 'fixed', top: '0px', float: 'right'});
$('#sticky').addClass("sticky");
} else {
$('#sticky').removeClass("sticky");
}
});
});
However, the current implementation adds the "sticky" class as soon as the user scrolls, rather than waiting for the original header to disappear. Any suggestions on how to improve this functionality would be greatly appreciated.
Best regards