https://www.nefk.com/root/design/js/global-utilities.js

1//Function definition for header scroll handler
2//Initial scroll position
3let prevScrollpos = window.scrollY;
4const header = $("#global-nav");
5
6//Flag to check if menu is hidden
7let up = false;
8
9//Flag for requestAnimationFrame limiting
10let update = false;
11
12/* When the user scrolls down, hide the navbar. When the user scrolls up, show the navbar */
13const handleScroll = () => {
14    const currentScrollPos = $(window).scrollTop();
15    const headerHeight = header.outerHeight();
16
17    if (window.innerWidth < 992){
18        //Don't fix the nav on mobile
19    }
20    else if (header.hasClass("header--gradient-toggle") && window.innerWidth >= 992) {
21        $("body").css("padding-top", "");
22
23        hideHeader(currentScrollPos);
24
25        if (currentScrollPos == 0) {
26            header.css("top", "0");
27        }
28
29        if (header.hasClass("header--gradient-toggle")) {
30            if (currentScrollPos == 0) {
31                header.addClass("header--gradient");
32            } else if (header.hasClass("header--gradient")) {
33                header.removeClass("header--gradient");
34            }
35        }
36    } else if (currentScrollPos > headerHeight) {
37        $("body").css("padding-top", `${headerHeight}px`);
38        header.addClass("position-fixed");
39        hideHeader(currentScrollPos);
40    } else if (currentScrollPos == 0) {
41        header.removeClass("position-fixed");
42        header.css("top", "");
43        $("body").css("padding-top", "");
44
45    }
46    //Updates value of last known scroll position for next tick
47    prevScrollpos = currentScrollPos;
48
49};
50
51const hideHeader = (currentScroll) => {
52    if (up && prevScrollpos > currentScroll) {
53        $("#global-nav").css("top", "0");
54        up = !up;
55    } else if (!up && currentScroll > prevScrollpos) {
56        $(".header__hamburger[aria-expanded='true']").click().blur();
57        $("#global-nav").css("top", "");
58        up = !up;
59        $("#global-nav").removeClass("header--initial");
60
61    }
62
63    //Only for PDP
64    if($(".product-details__cta--desktop").length){
65        setStickySection(up);
66    }
67}
68
69
70const updateAnimationTick = () => {
71    //Resets update so we can capture next onScroll
72    update = false;
73    handleScroll();
74}
75
76const requestTick = () => {
77    if (!update) {
78        requestAnimationFrame(updateAnimationTick)
79        update = true;
80    }
81}
82
83
84const fillIcon = (event) => {
85    const icon = $(event.target).find("i.fa-heart");
86    if(icon.length){
87        icon.toggleClass("far");
88        icon.toggleClass("fas");
89    }
90}
91
92const clampLines = () =>{
93    $(".clamp").each((index, element) => {
94        const maxLines = element.dataset.clamp;
95        $clamp(element, {clamp: maxLines, useNativeClamp: false});
96    });
97}
98
99
100$(document).ready(function () {
101
102
103    $(".carousel-controls, a").each((index, element) => {
104        $(element).on("click", (event) => {
105            event.target.blur();
106        });
107    })
108
109    //Removes CTA banner from DOM
110    $(".cta-banner__dismiss").on("click", (event) => {
111        $(event.target).closest(".cta-banner--dismissable").remove();
112    })
113
114    //Adds hover behavior for line-icons
115    $(".button-cta").hover(fillIcon)
116    $(".button-cta").focus(fillIcon)
117
118    //Handles header scroll events:
119    // Hides header, toggles gradient on desktop
120    $(window).on("scroll", requestTick);
121    $(window).on("resize", requestTick);
122
123    $(window).trigger("scroll");
124
125    clampLines();
126
127})