From 80d35e420e85cf551bc8653f57607d4efa4db2d9 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 18 Sep 2020 14:26:33 +0000
Subject: [PATCH] [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 | 21 +++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index ad933e369a1..27000cfd48d 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/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
      */