https://gritroutdoors.com/content/custom_scripts/mobile_search.js

1document.addEventListener('DOMContentLoaded', function () {
2  // --- Constants for selectors, classes, and values ---
3  const SELECTORS = {
4    searchButton: '.navUser-item--mobileSearch',
5    searchInput: '._searchBar',
6    mainContent: '.slideshow-container',
7    header: 'header.header',
8    headerPlaceholder: '#header-placeholder',
9  };
10
11  const CLASSES = {
12    mobileSearchActive: 'mobileSearch-active',
13    slideshowMobileSearch: 'slideshow-container-mobileSearch',
14    fixedHeaderCustom: 'fixed-header--custom',
15  };
16
17  const SCROLL_THRESHOLD = 43; // Scroll position to activate fixed header
18  const MOBILE_BREAKPOINT = 803; // Max width for mobile view
19  const HEADER_OFFSET = 40; // Additional height for fixed header placeholder
20
21  // --- Get DOM elements ---
22  const searchButton = document.querySelector(SELECTORS.searchButton);
23  const searchInput = document.querySelector(SELECTORS.searchInput);
24  const mainContent = document.querySelector(SELECTORS.mainContent);
25  const header = document.querySelector(SELECTORS.header);
26  // const placeholder = document.getElementById(
27  //   SELECTORS.headerPlaceholder.substring(1)
28  // );
29
30  // --- Exit if critical elements are missing ---
31  if (!searchButton || !searchInput || !header) {
32    console.warn('Missing critical DOM elements. Script halted.');
33    return;
34  }
35
36  const headerHeight = header.offsetHeight + HEADER_OFFSET;
37
38  // --- Event handlers ---
39
40  /** Toggles mobile search active state and main content shift. */
41  function handleSearchButtonClick() {
42    searchInput.classList.toggle(CLASSES.mobileSearchActive);
43    mainContent?.classList.toggle(CLASSES.slideshowMobileSearch);
44  }
45
46  /** Manages fixed header state based on scroll and screen width. */
47  function handleWindowScroll() {
48    const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
49    const isScrolled = window.scrollY >= SCROLL_THRESHOLD;
50
51    if (isScrolled && isMobile) {
52      header.classList.add(CLASSES.fixedHeaderCustom);
53      // placeholder.style.height = `${headerHeight}px`;
54    } else {
55      header.classList.remove(CLASSES.fixedHeaderCustom);
56      // placeholder.style.height = '0px';
57    }
58  }
59
60  // --- Attach event listeners ---
61  searchButton.addEventListener('click', handleSearchButtonClick);
62  window.addEventListener('scroll', handleWindowScroll);
63});