[FIX] website: update main padding top before making the header affixed

When the header goes affixed, a compensating padding-top is added on
the content so that the scroll does not flicker. That padding-top was
added a bit too late and was enough to mess up the scroll on pages where
the content is about the height of the viewport: the header goes affix,
the scrollable content becomes smaller, the padding top is added, a
scroll is detected, the header is un-affixed since above scroll point
-> bug. If the padding top is added first, then there is no problem.

Note: the scroll effects code could probably use some refactoring.

Part of https://github.com/odoo/odoo/pull/56936
task-2312878

closes odoo/odoo#56936

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

1 files changed, 2 insertions, 3 deletions

diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js
index b1da4caf809..c30ad571d04 100644
--- a/addons/website/static/src/js/content/menu.js
+++ b/addons/website/static/src/js/content/menu.js
@@ -133,9 +133,9 @@ const BaseAnimatedHeader = animations.Animation.extend({
      */
     _toggleFixedHeader: function (useFixed = true) {
         this.fixedHeader = useFixed;
+        this._adaptToHeaderChange();
         this.el.classList.toggle('o_header_affixed', useFixed);
         this._adaptFixedHeaderPosition();
-        this._adaptToHeaderChange();
     },
     /**
      * @private
@@ -147,8 +147,7 @@ const BaseAnimatedHeader = animations.Animation.extend({
         if (this.isOverlayHeader) {
             return;
         }
-        const headerSize = this.el.classList.contains('o_header_affixed');
-        this.$main.css('padding-top', headerSize ? this.headerHeight : '');
+        this.$main.css('padding-top', this.fixedHeader ? this.headerHeight : '');
     },
 
     //--------------------------------------------------------------------------