[IMP] website: fix interaction between ToC snippet and header effects

This commit also add the possibility to indicate a "top gap" = a part
on the top of the header which is not supposed to be shown once the page
is scrolled (this is a leftover of the "preheader" task which was
cancelled for something better, but that JS code still made sense as a
possibility).

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

Co-authored-by: Benjamin Vray <bvr@odoo.com>

1 files changed, 17 insertions, 12 deletions

diff --git a/addons/website/static/src/snippets/s_table_of_content/000.js b/addons/website/static/src/snippets/s_table_of_content/000.js
index ca6460df641..ac610304e48 100644
--- a/addons/website/static/src/snippets/s_table_of_content/000.js
+++ b/addons/website/static/src/snippets/s_table_of_content/000.js
@@ -2,6 +2,7 @@ odoo.define('website.s_table_of_content', function (require) {
 'use strict';
 
 const publicWidget = require('web.public.widget');
+const {extraMenuUpdateCallbacks} = require('website.content.menu');
 
 const TableOfContent = publicWidget.Widget.extend({
     selector: 'section .s_table_of_content_navbar_sticky',
@@ -11,18 +12,15 @@ const TableOfContent = publicWidget.Widget.extend({
      * @override
      */
     start: function () {
-        const $menuLoading = $('.o_menu_loading');
-        if (!$menuLoading.length) {
-            this._initializeNavbarTopPosition();
-        } else {
-            $(document.body).one('menu_loaded', () => this._initializeNavbarTopPosition());
-        }
+        this._initializeNavbarTopPosition();
+        extraMenuUpdateCallbacks.push(this._updateTableOfContentNavbarPosition.bind(this));
         return this._super.apply(this, arguments);
     },
     /**
      * @override
      */
     destroy: function () {
+        this.$target.css('top', '');
         this.$target.find('.s_table_of_content_navbar').css('top', '');
         this._super.apply(this, arguments);
     },
@@ -34,17 +32,24 @@ const TableOfContent = publicWidget.Widget.extend({
     /**
      * Initialize the top position of the snippet navbar according to the height
      * of the headers of the page.
-     * 
+     *
      * @private
      */
     _initializeNavbarTopPosition: function () {
         let headerHeight = 0;
         const $fixedElements = $('.o_top_fixed_element');
-        const isHorizontalNavbar = this.$target.hasClass('s_table_of_content_horizontal_navbar');
         _.each($fixedElements, el => headerHeight += $(el).outerHeight());
-        this.$target.css('top', isHorizontalNavbar ? headerHeight : '');
-        this.$target.find('.s_table_of_content_navbar').css('top', !isHorizontalNavbar ? headerHeight : '');
-        $('body').scrollspy({target: '.s_table_of_content_navbar', offset: headerHeight + 100});
+        this._updateTableOfContentNavbarPosition(headerHeight);
+    },
+    /**
+     * @private
+     * @param {number} position
+     */
+    _updateTableOfContentNavbarPosition: function (position) {
+        const isHorizontalNavbar = this.$target.hasClass('s_table_of_content_horizontal_navbar');
+        this.$target.css('top', isHorizontalNavbar ? position : '');
+        this.$target.find('.s_table_of_content_navbar').css('top', isHorizontalNavbar ? '' : position + 20);
+        $('body').scrollspy({target: '.s_table_of_content_navbar', offset: position + 100});
     },
 });
 
@@ -57,7 +62,7 @@ publicWidget.registry.anchorSlide.include({
     /**
      * Overridden to add the height of the horizontal sticky navbar at the scroll value
      * when the link is from the table of content navbar
-     * 
+     *
      * @override
      * @private
      */