https://bhpt.org/resources/js/navigation.js?v=2.19

1/**
2 * Entête figée du portail (option « Position de l'entête du site » = « Figé »).
3 *
4 * En mode figé, la zone personnalisée située au-dessus de l'entête (`#headers`,
5 * cf. « Personnalisation de la zone au-dessus de l'entête de page ») est
6 * épinglée en haut de la fenêtre par la CSS, et l'entête
7 * (`nav.catalog-navigation.navigation-fixed`) se place juste en dessous.
8 *
9 * La hauteur de cette zone n'est connue qu'à l'exécution : elle dépend du
10 * contenu personnalisé du portail, de la largeur de la fenêtre et du chargement
11 * des images. Ce script la publie donc dans la variable CSS
12 * `--fixed-headers-height`, dont la feuille de style se sert à la fois pour
13 * décaler l'entête et pour compenser la hauteur retirée du flux.
14 */
15(function ($) {
16    'use strict';
17
18    let HAMBURGER_OFFSET = 15;
19    let HEADERS_HEIGHT_VARIABLE = '--fixed-headers-height';
20
21    let $window = $(window);
22    let $headers = null;
23    let $hamburger = null;
24    let pendingFrame = null;
25
26    /**
27     * Publie la hauteur de la zone personnalisée dans la variable CSS et
28     * aligne le bouton hamburger sur l'entête.
29     *
30     * @returns {void}
31     */
32    function updateHeadersHeight() {
33        let headersHeight = $headers.outerHeight(true) || 0;
34
35        document.documentElement.style.setProperty(HEADERS_HEIGHT_VARIABLE, headersHeight + 'px');
36
37        if ($hamburger.length) {
38            $hamburger.css('top', headersHeight + HAMBURGER_OFFSET + 'px');
39        }
40    }
41
42    /**
43     * Planifie une mise à jour sur la prochaine frame d'affichage, afin de
44     * regrouper les recalculs lorsque plusieurs évènements se succèdent.
45     *
46     * @returns {void}
47     */
48    function scheduleUpdate() {
49        if (null !== pendingFrame) {
50            return;
51        }
52
53        pendingFrame = window.requestAnimationFrame(function () {
54            pendingFrame = null;
55            updateHeadersHeight();
56        });
57    }
58
59    /**
60     * Surveille les variations de hauteur de la zone personnalisée : son
61     * contenu est dynamique (images chargées après coup, bannière applicative
62     * injectée dans #app-banner, diaporama, etc.).
63     *
64     * @returns {void}
65     */
66    function observeHeadersHeight() {
67        if ('function' !== typeof window.ResizeObserver) {
68            return;
69        }
70
71        new window.ResizeObserver(scheduleUpdate).observe($headers[0]);
72    }
73
74    /**
75     * Lorsque l'entête est figée et que la popup d'autocomplétion apparait
76     * sous le champ de recherche, elle est dissimulée lors du défilement pour
77     * éviter un décalage graphique, car cette popup est figée aussi.
78     *
79     * @returns {void}
80     */
81    function hideAutocomplete() {
82        $('.ui-autocomplete').hide();
83    }
84
85    $(function () {
86        $headers = $('#headers');
87
88        if (!$headers.length || !$('.catalog-navigation.navigation-fixed').length) {
89            return;
90        }
91
92        $hamburger = $('.hamburger');
93
94        updateHeadersHeight();
95        observeHeadersHeight();
96
97        $window
98            .on('load', scheduleUpdate)
99            .on('resize', scheduleUpdate)
100            .on('scroll', hideAutocomplete);
101    });
102})(jQuery);