$(document).ready(function() {
    var header = $('header'); // Adjust this selector to target your header element accurately
    var headerHeight = header.outerHeight();
    var headerOffset = header.offset().top;
    var placeholder = $('<div class="header-placeholder">').insertBefore(header).css('height', headerHeight).hide();

    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();

        if (scrollPos > headerHeight){
            if (!header.hasClass('stuck')) {
                placeholder.show().css('height', headerHeight); // Make placeholder take up space
                console.log('',headerHeight);
                header.css('top', -headerHeight); // Initially position header off-screen
                header.addClass('stuck');
                header.animate({top: '0'}, 500); // Animate header sliding into view
            }
        } else {
            header.removeClass('stuck');
            placeholder.hide(); // Hide placeholder to release space
        }
    });
});