[REF] web, website: avoid compensateScrollbar JQuery override

In this commit, we simply set 'position' to 'sticky' on 'o_header_affixed'
to avoid to manage it's position with 'padding-top' and 'right'.

- 'padding-top' css property was used to compensate the navbar height
   at the moment where the stacking context change because of the
   fixed position.
- 'right' css property was used to prevent the menu to overlapp
   the scroll bar.

Part-of: odoo/odoo#99338

addons/web/static/src/legacy/js/core/dom.js

@@ -161,13 +161,6 @@ var dom = {
     closestScrollable(el) {
         return $(el).closestScrollable()[0] || null;
     },
-    /**
-     * @param {HTMLElement} el
-     * @see $.compensateScrollbar
-     */
-    compensateScrollbar(el, ...rest) {
-        $(el).compensateScrollbar(...rest);
-    },
     /**
      * jQuery find function behavior is::
      *

addons/web/static/src/legacy/js/libs/jquery.js

@@ -139,31 +139,6 @@ $.fn.extend({
         }
         return $el;
     },
-    /**
-     * Adapt the given css property by adding the size of a scrollbar if any.
-     * Limitation: only works if the given css property is not already used as
-     * inline style for another reason.
-     *
-     * @param {boolean} [add=true]
-     * @param {boolean} [isScrollElement=true]
-     * @param {string} [cssProperty='padding-right']
-     */
-    compensateScrollbar(add = true, isScrollElement = true, cssProperty = 'padding-right') {
-        for (const el of this) {
-            // Compensate scrollbar
-            el.style.removeProperty(cssProperty);
-            if (!add) {
-                return;
-            }
-            const scrollableEl = isScrollElement ? el : $(el).parent().closestScrollable()[0];
-            const style = window.getComputedStyle(el);
-            const borderLeftWidth = parseInt(style.borderLeftWidth.replace('px', ''));
-            const borderRightWidth = parseInt(style.borderRightWidth.replace('px', ''));
-            const bordersWidth = borderLeftWidth + borderRightWidth;
-            const newValue = parseInt(style[cssProperty]) + scrollableEl.offsetWidth - scrollableEl.clientWidth - bordersWidth;
-            el.style.setProperty(cssProperty, `${newValue}px`, 'important');
-        }
-    },
     /**
      * @returns {jQuery}
      */

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

@@ -2,7 +2,6 @@ odoo.define('website.content.menu', function (require) {
 'use strict';
 
 const config = require('web.config');
-var dom = require('web.dom');
 var publicWidget = require('web.public.widget');
 var animations = require('website.content.snippets.animation');
 const extraMenuUpdateCallbacks = [];
@@ -32,7 +31,6 @@ const BaseAnimatedHeader = animations.Animation.extend({
      */
     start: function () {
         this.$main = this.$el.next('main');
-        this.isOverlayHeader = !!this.$el.closest('.o_header_overlay, .o_header_overlay_theme').length;
         this.$dropdowns = this.$el.find('.dropdown, .dropdown-menu');
         this.$navbarCollapses = this.$el.find('.navbar-collapse');
 
@@ -71,18 +69,13 @@ const BaseAnimatedHeader = animations.Animation.extend({
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * @private
-     */
-    _adaptFixedHeaderPosition() {
-        dom.compensateScrollbar(this.el, this.fixedHeader, false, 'right');
-    },
     /**
      * @private
      */
     _adaptToHeaderChange: function () {
         this.options.wysiwyg && this.options.wysiwyg.odooEditor.observerUnactive();
-        this._updateMainPaddingTop();
+        this.headerHeight = this.$el.outerHeight();
+        this.topGap = this._computeTopGap();
         // Take menu into account when `dom.scrollTo()` is used whenever it is
         // visible - be it floating, fully displayed or partially hidden.
         this.el.classList.toggle('o_top_fixed_element', this._isShown());
@@ -142,19 +135,6 @@ const BaseAnimatedHeader = animations.Animation.extend({
         this.fixedHeader = useFixed;
         this._adaptToHeaderChange();
         this.el.classList.toggle('o_header_affixed', useFixed);
-        this._adaptFixedHeaderPosition();
-    },
-    /**
-     * @private
-     */
-    _updateMainPaddingTop: function () {
-        this.headerHeight = this.$el.outerHeight();
-        this.topGap = this._computeTopGap();
-
-        if (this.isOverlayHeader) {
-            return;
-        }
-        this.$main.css('padding-top', this.fixedHeader ? this.headerHeight : '');
     },
 
     //--------------------------------------------------------------------------
@@ -198,7 +178,6 @@ 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');

addons/website/static/src/scss/website.scss

@@ -746,7 +746,7 @@ $-transition-duration: 200ms;
 .o_header_affixed {
     display: block;
     @include o-position-absolute(0, 0, auto, 0);
-    position: fixed;
+    position: sticky;
 
     &:not(.o_header_no_transition) {
         transition: transform $-transition-duration;