https://truebluesalon.com/wp-content/themes/ph-base-tailwind/assets/js/sticky-header.js?ver=1.0.0

1jQuery(document).ready(function($) {
2    const $header = $('#top-bar');
3    const backgroundChangeThreshold = 0; // Scroll distance to change background
4    const hideHeaderThreshold = 200;    // Scroll distance to start hiding (after background change)
5
6    let lastScrollTop = 0;
7
8    $(window).on('scroll', function() {
9        let scrollTop = $(this).scrollTop();
10
11        // Condition 1: When at the very top of the page
12        if (scrollTop === 0) {
13            $header.removeClass('header-solid header-hidden');
14            $header.css('background-color', ''); // clear inline style -> transparent via CSS
15        }
16        // Condition 2: Scrolling down
17        else if (scrollTop > backgroundChangeThreshold) {
18            if (!$header.hasClass('header-solid')) {
19                $header.addClass('header-solid');
20            }
21
22            if (scrollTop > (backgroundChangeThreshold + hideHeaderThreshold) && scrollTop > lastScrollTop) {
23                $header.addClass('header-hidden');
24            } else {
25                $header.removeClass('header-hidden');
26            }
27        }
28
29        // Condition 3: Scrolling up
30        if (scrollTop < lastScrollTop) {
31            $header.removeClass('header-hidden');
32
33            if (scrollTop <= backgroundChangeThreshold) {
34                $header.removeClass('header-solid');
35                $header.css('background-color', ''); // clear inline style -> transparent via CSS
36            }
37        }
38
39        lastScrollTop = scrollTop;
40    });
41});