/** * Auto-Hide Navigation Script - jQuery Version * Smoothly hides navigation when scrolling down and shows it when scrolling up */ (function($) { 'use strict'; // Configuration const config = { scrollThreshold: 100, // Start hiding after this many pixels mouseRevealZone: 100, // Show header when mouse is within this many pixels from top animationDuration: 300, // Animation duration in ms debounceDelay: 10 // Scroll event debounce delay }; // State management let state = { lastScrollTop: 0, isVisible: true, headerHeight: 0, ticking: false }; // DOM elements let $header, $body; // Initialize when document is ready $(document).ready(function() { init(); }); function init() { console.log('Auto-hide navigation: jQuery script loaded'); // Find header elements - Try multiple selectors for Twenty Twenty-Five $header = $('header').first(); if (!$header.length) { $header = $('.wp-site-header').first(); } if (!$header.length) { $header = $('.wp-block-template-part[data-area="header"]').first(); } if (!$header.length) { $header = $('[class*="header"]').first(); } if (!$header.length) { $header = $('nav').first(); } $body = $('body'); console.log('Header element found:', $header[0]); console.log('Header length:', $header.length); if (!$header.length) { console.warn('Auto-hide navigation: No header element found'); return; } // Add identifying class for our CSS $header.addClass('srh-auto-hide-header'); // Setup calculateHeaderHeight(); bindEvents(); // Initial state updateHeaderState(); console.log('Auto-hide navigation: Initialization complete'); console.log('Header height calculated:', state.headerHeight); } function calculateHeaderHeight() { if (!$header.length) return; state.headerHeight = $header.outerHeight() || 80; $('html').css('--header-height', state.headerHeight + 'px'); console.log('Header height:', state.headerHeight); } function bindEvents() { // Scroll event with debouncing $(window).on('scroll', debounce(handleScroll, config.debounceDelay)); // Resize event $(window).on('resize', debounce(calculateHeaderHeight, 100)); // Mouse movement for revealing header $(document).on('mousemove', handleMouseMove); // Keyboard events for accessibility $(document).on('keydown', handleKeydown); // Focus events for accessibility $header.find('a, button, input, textarea, select, [tabindex]').on('focus', showHeader); // Smooth scroll for anchor links $(document).on('click', 'a[href^="#"]', handleAnchorClick); console.log('Events bound successfully'); } function handleScroll() { if (!state.ticking) { requestAnimationFrame(updateHeaderState); state.ticking = true; } } function updateHeaderState() { const scrollTop = $(window).scrollTop(); // Add scrolled class for styling if (scrollTop > 50) { $body.addClass('header-offset'); $header.addClass('header-scrolled'); } else { $body.removeClass('header-offset'); $header.removeClass('header-scrolled'); } // Hide/show logic if (scrollTop > config.scrollThreshold) { if (scrollTop > state.lastScrollTop && state.isVisible) { // Scrolling down - hide header hideHeader(); } else if (scrollTop < state.lastScrollTop && !state.isVisible) { // Scrolling up - show header showHeader(); } } else if (!state.isVisible) { // Near top - always show header showHeader(); } state.lastScrollTop = scrollTop; state.ticking = false; } function hideHeader() { if (!state.isVisible) return; console.log('Hiding header'); state.isVisible = false; $header.removeClass('header-visible').addClass('header-hidden'); // Dispatch custom event $(document).trigger('headerHidden', { headerElement: $header[0], isVisible: state.isVisible, scrollTop: state.lastScrollTop }); } function showHeader() { if (state.isVisible) return; console.log('Showing header'); state.isVisible = true; $header.removeClass('header-hidden').addClass('header-visible'); // Dispatch custom event $(document).trigger('headerVisible', { headerElement: $header[0], isVisible: state.isVisible, scrollTop: state.lastScrollTop }); } function handleMouseMove(e) { if (e.clientY < config.mouseRevealZone && $(window).scrollTop() > config.scrollThreshold && !state.isVisible) { showHeader(); } } function handleKeydown(e) { // Show header on Tab or Escape for accessibility if (e.key === 'Tab' || e.key === 'Escape') { showHeader(); } } function handleAnchorClick(e) { const $link = $(e.currentTarget); const targetId = $link.attr('href').substring(1); const $target = $('#' + targetId); if ($target.length) { e.preventDefault(); const offsetTop = $target.offset().top - state.headerHeight; $('html, body').animate({ scrollTop: offsetTop }, 600); } } function debounce(func, wait) { let timeout; return function executedFunction() { const context = this; const args = arguments; const later = function() { clearTimeout(timeout); func.apply(context, args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Public API window.SRHNavigation = { show: showHeader, hide: hideHeader, toggle: function() { state.isVisible ? hideHeader() : showHeader(); }, getState: function() { return $.extend({}, state); }, updateConfig: function(newConfig) { $.extend(config, newConfig); }, getHeader: function() { return $header; } }; })(jQuery);