odoo16中 导航栏悬停

一开始尝试了很多方法，都需要用到$(window).scrollTop。但是我的项目使用$(window).scrollTop，获取不到目标元素到顶部的距离，所以换了这种可以实现的方法：

xml文件中的部分内容：

<div class="min_banner_nav" >
            <div class="banner_container">
                <img src="/xxx.jpg"/>
                <div class="banner_con_title">
                    <h2>
                        标题
                    </h2>
                </div>
            </div>
            <div class="min_nav" data-sticky-threshold="330">
                <div class="min_nav_content">
                    <!--导航栏内容-->
                    <ul class="d-flex justify-content-evenly">
                        <a href="#one"><li class="min_nav_item" data-target="one">内容1</li></a>
                        <a href="#two"><li class="min_nav_item" data-target="two">内容2</li></a>
                        <a href="#three"><li class="min_nav_item" data-target="three">内容3</li></a>
                        <a href="#four"><li class="min_nav_item" data-target="four">内容4</li></a>
                        <a href="#five"><li class="min_nav_item" data-target="five">内容5</li></a>
                        <a href="#six"><li class="min_nav_item" data-target="six">内容6</li></a>
                        <a href="#seven"><li class="min_nav_item" data-target="seven">内容7</li></a>
                    </ul>
                </div>
            </div>
        </div>

js文件里的内容：

// 定义Odoo模块 `your_module_name.min_nav_style`
odoo.define('your_module_name.min_nav', function (require) {
    'use strict';

    // 引入公共Widget库
    var publicWidget = require('web.public.widget');

    // 创建一个名为'navScrollStyle'的公共Widget扩展
    publicWidget.registry.navScrollStyle= publicWidget.Widget.extend({

        // 定义选择器，此Widget将应用于所有匹配该选择器的DOM元素
        selector: '.min_banner_nav',

        // 初始化事件对象，这里为空，因为我们直接在start方法里处理滚动事件
        events: {},

        // 初始化方法，在创建Widget实例时调用
        init: function () {
            // 保存原始导航栏的CSS样式，以便在取消粘滞状态时恢复
            this.originalNavBarCss = {
                position: $('.min_nav').css('position'),
                // 这里可以添加更多需要存储并恢复的样式属性
            };

            // 从.min_nav元素的"data-sticky-threshold"属性中获取粘滞阈值
            this.stickyThreshold = parseInt($('.min_nav').data('sticky-threshold'), 10);
        },

        // 开始方法，在Widget启动并附加到DOM时调用
        start: function () {
            var _this = this;

            // 监听窗口滚动事件
            window.addEventListener('scroll', function () {
                // 获取.min_banner_nav父元素相对于视口的位置
                var rect = $('.min_banner_nav').parent()[0].getBoundingClientRect();

                // 判断滚动高度是否超过阈值
                if (window.scrollY >= rect.top + _this.stickyThreshold) {
                    // 当滚动到阈值以上时，将.min_nav变为固定定位，并设置相关样式
                    $('.min_nav').css({
                        position: 'fixed',
                        top: '53px',
                        width: '100%',
                        zIndex: 1000,
                        // 可在此处添加更多在固定状态下需要设置的样式属性
                    });
                } else {
                    // 否则，将.min_nav的样式恢复至初始状态
                    $('.min_nav').css(_this.originalNavBarCss);
                }
            }, true); // 使用捕获阶段的事件监听器，确保在早期阶段捕获事件

        },

        // 销毁方法，在Widget从DOM中移除时调用，用于清理资源
        destroy: function () {
            // 移除滚动事件监听器
            // 注意：这里假设存在名为scrollHandler的变量存储了滚动事件处理器
            // 若在start方法中使用了匿名函数，则此处需要先将匿名函数赋值给实例变量
            window.removeEventListener('scroll', this.scrollHandler, true);
        },
    });

    // 返回已定义的Widget类，供Odoo系统识别并使用
    return publicWidget.registry.navScrollStyle;
});