https://www.wellcome.it/js/header.js

1(function () {
2    window.addEventListener('load', function () {
3        SetActivePage();
4        SetStickyNavbar();
5
6        setTimeout(function () {
7            //Apertura menu da mobile
8            let menu = document.querySelector('header .top-bar .nav-menu');
9            if (menu)
10                menu.addEventListener('click', ToggleNavMenu);
11
12            SetAperturaDropdownMenu();
13            SetNavbarMarginTop();
14
15            window.addEventListener('resize', function () {
16                if (window.outerWidth > 1024) {
17                    document.querySelector('header').classList.remove('mobile-open');
18                    document.querySelector('body').classList.remove('noscroll');
19                }
20
21                SetNavbarMarginTop();
22            });
23            window.resizeBy(0, 0);
24        }, 100);
25    });
26})();
27
28function SetActivePage() {
29    let menuLinks = document.querySelectorAll('header .bottom-bar nav .nav-item .nav-link');
30
31    if (menuLinks) {
32        for (let ii = 0; ii < menuLinks.length; ii++) {
33            if (menuLinks[ii].href === window.location.href)
34                menuLinks[ii].classList.add('activePage');
35        }
36    }
37}
38
39function SetStickyNavbar() {
40    let body = document.querySelector('body');
41    let header = document.querySelector('header');
42    let main = document.querySelector('main');
43
44    if (window.scrollY > 1) {
45        header.classList.add('sticky');
46        if (!body.classList.contains('homepage'))
47            main.style.marginTop = header.clientHeight + 'px';
48    }
49
50    window.addEventListener('scroll', function (e) {
51        let body = document.querySelector('body');
52        let header = document.querySelector('header');
53        let main = document.querySelector('main');
54
55        if (window.scrollY > 1) {
56            header.classList.add('sticky');
57            if (!body.classList.contains('homepage'))
58                main.style.marginTop = header.clientHeight + 'px';
59        }
60        else {
61            header.classList.remove('sticky');
62            if (!body.classList.contains('homepage'))
63                main.style.marginTop = 0;
64        }
65
66        //SetMobileNavbarHeight();
67        setTimeout(SetNavbarMarginTop, 300);        
68    });
69}
70
71function ToggleNavMenu() {
72    let header = document.querySelector('header');
73    toggleClass(header, 'mobile-open');
74    toggleClass(document.querySelector('body'), 'noscroll');
75
76    let topBar = header.querySelector('.top-bar');
77    let bottomBar = header.querySelector('.bottom-bar');
78    if (header.classList.contains('mobile-open'))
79        bottomBar.style.height = 'calc(100vh - ' + topBar.offsetHeight + 'px';
80    else
81        bottomBar.style.height = 'auto';
82
83    SetNavbarMarginTop();
84}
85
86function SetMobileNavbarHeight() {
87    if (window.outerWidth < 1024) {
88        let header = document.querySelector('header');
89        let nav = document.querySelector('header .bottom-bar nav');
90        nav.style.height = 'calc(100vh - ' + header.clientHeight + 'px)';
91        nav.style.top = header.clientHeight + 'px';
92    }
93    else {
94        let nav = document.querySelector('header nav');
95        nav.style.height = 'auto';
96        nav.style.top = 0;
97    }
98}
99
100function SetNavbarMarginTop() {
101    let header = document.querySelector('header');
102    if (window.outerWidth < 1024)
103        header.querySelector('.bottom-bar').style.marginTop = header.querySelector('.top-bar').offsetHeight + 'px';
104    else
105        header.querySelector('.bottom-bar').style.marginTop = 0;
106}
107
108function SetAperturaDropdownMenu() {
109    let navItems = document.querySelectorAll('header .bottom-bar .nav-item');
110    if (navItems) {
111        for (let ii = 0; ii < navItems.length; ii++) {
112            let navLink = navItems[ii].querySelector('.nav-link.dropdown');
113            if (navLink)
114                navLink.addEventListener('click', function (evt) {
115                    evt.preventDefault();
116
117                    let dropdownMenu = navItems[ii].querySelector('.dropdown-menu');
118                    if (dropdownMenu) {
119                        if (dropdownMenu.classList.contains('open'))
120                            dropdownMenu.classList.remove('open');
121                        else
122                            dropdownMenu.classList.add('open');
123
124                        if (this.classList.contains('open'))
125                            this.classList.remove('open');
126                        else
127                            this.classList.add('open');
128                    }
129                });
130        }
131    }
132}
133
134
135
136function toggleClass(element, classToToggle) {
137    if (element.classList.contains(classToToggle))
138        element.classList.remove(classToToggle);
139    else
140        element.classList.add(classToToggle);
141}