[FIX] website: correctly add o_top_fixed_element class on header

The class is supposed to be placed on elements which are absolutely
positioned over the main scrolling element at the top of the page. It
was wrongly placed on headers as soon as they become fixed while they
should have been placed on headers as soon as they become fixed *and*
over the main scrolling element.

Part of https://github.com/odoo/odoo/pull/57975
task-2344227

X-original-commit: ee47bd9ce0da526ea5b3387a354ab8fbd06cc55f

addons/website/static/src/js/content/menu.js

@@ -74,6 +74,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
      */
     _adaptToHeaderChange: function () {
         this._updateMainPaddingTop();
+        this.el.classList.toggle('o_top_fixed_element', this.fixedHeader && this._isShown());
 
         const bottom = this.el.getBoundingClientRect().bottom
             || (this.el.nextElementSibling.getBoundingClientRect().top + window.scrollY);
@@ -116,6 +117,12 @@ const BaseAnimatedHeader = animations.Animation.extend({
     _computeTopGap() {
         return 0;
     },
+    /**
+     * @private
+     */
+    _isShown() {
+        return true;
+    },
     /**
      * @private
      * @param {boolean} [useFixed=true]
@@ -123,7 +130,6 @@ const BaseAnimatedHeader = animations.Animation.extend({
     _toggleFixedHeader: function (useFixed = true) {
         this.fixedHeader = useFixed;
         this.el.classList.toggle('o_header_affixed', useFixed);
-        this.el.classList.toggle('o_top_fixed_element', useFixed);
         this._adaptToHeaderChange();
     },
     /**
@@ -210,6 +216,12 @@ publicWidget.registry.StandardAffixedHeader = BaseAnimatedHeader.extend({
     // Handlers
     //--------------------------------------------------------------------------
 
+    /**
+     * @override
+     */
+    _isShown() {
+        return !this.fixedHeader || this.fixedHeaderShow;
+    },
     /**
      * Called when the window is scrolled
      *
@@ -232,6 +244,7 @@ publicWidget.registry.StandardAffixedHeader = BaseAnimatedHeader.extend({
         if (this.fixedHeaderShow !== reachPosScrolled) {
             this.$el.css('transform', reachPosScrolled ? `translate(0, -${this.topGap}px)` : 'translate(0, -100%)');
             this.fixedHeaderShow = reachPosScrolled;
+            this._adaptToHeaderChange();
         }
     },
 });
@@ -295,6 +308,12 @@ const BaseDisappearingHeader = publicWidget.registry.FixedHeader.extend({
     _hideHeader: function () {
         this.$el.trigger('odoo-transitionstart');
     },
+    /**
+     * @override
+     */
+    _isShown() {
+        return !this.fixedHeader || !this.hiddenHeader;
+    },
     /**
      * @private
      */