diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index bcf9ebbaf78..70ed4565185 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -69,6 +69,18 @@ const BaseAnimatedHeader = animations.Animation.extend({ // Private //-------------------------------------------------------------------------- + /** + * @private + */ + _adaptFixedHeaderPosition() { + // Compensate scrollbar + this.el.style.removeProperty('right'); + if (this.fixedHeader) { + const scrollableEl = this.$el.parent().closestScrollable()[0]; + const style = window.getComputedStyle(this.el); + this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important'); + } + }, /** * @private */ @@ -128,14 +140,7 @@ const BaseAnimatedHeader = animations.Animation.extend({ _toggleFixedHeader: function (useFixed = true) { this.fixedHeader = useFixed; this.el.classList.toggle('o_header_affixed', useFixed); - // Compensate scrollbar - if (useFixed) { - const scrollableEl = this.$el.parent().closestScrollable()[0]; - const style = window.getComputedStyle(this.el); - this.el.style.setProperty('right', `${parseInt(style['right']) + scrollableEl.offsetWidth - scrollableEl.clientWidth}px`, 'important'); - } else { - this.el.style.removeProperty('right'); - } + this._adaptFixedHeaderPosition(); this._adaptToHeaderChange(); }, /** @@ -191,6 +196,7 @@ const BaseAnimatedHeader = animations.Animation.extend({ * @private */ _updateHeaderOnResize: function () { + this._adaptFixedHeaderPosition(); if (document.body.classList.contains('overflow-hidden') && config.device.size_class > config.device.SIZES.SM) { document.body.classList.remove('overflow-hidden'); diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 4ef67042fc3..5bac9669000 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -18,6 +18,9 @@ body.o_connected_user { #oe_main_menu_navbar, #web_editor-top-edit, .o_we_website_top_actions, #oe_snippets { transition: transform 400ms ease 0s !important; } + .o_header_affixed { + transition: top 0.35s !important; + } } &.o_fullscreen { padding-top: 0 !important; @@ -31,6 +34,10 @@ body.o_connected_user { .o_we_website_top_actions, #oe_snippets { transform: translateX(100%); } + .o_header_affixed { + top: 0 !important; + right: 0 !important; + } } }