[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#58859

X-original-commit: bb77cd2961e71deaf048cbaad20f8cb72a646cab
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-09-29 17:50:38 +00:00
parent 887d19f378
commit 10131f8ebd
+2 -3
View File
@@ -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 : '');
},
//--------------------------------------------------------------------------