javascript - 粘性子菜单的起点

Question

我在新版本上有三个菜单。

菜单 1 一个粘性菜单，使用 position: fixed;最小高度:30px;

菜单 2 滚动 position: relative;

菜单 3(页面中部)以 position: absolute; 开始，然后随着用户滚动更改为 position: fixed;

菜单 1 和 3 需要在滚动时堆叠，目前它们是重叠的。

该网站是用 WP 构建的，并且一直在使用这个 Javascript 来控制菜单 3 的开始位置，但它没有被应用。代码已添加到主题功能。

add_action( 'wp_footer', 'enfold_customization_custom_scripts' );
function enfold_customization_custom_scripts() {
?>
<script type = "text/javascript">
jQuery(document).ready(function(){
var menu = document.querySelector('#sub_menu1')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '40px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});
</script>
<?php
}

以上代码来自以下来源:Codepen: position: sticky with Simply JS

我想要实现的是菜单 3 滚动到菜单 1 下方的正确位置并保持不变。当用户上下滚动时，菜单需要在页面上的正确位置粘贴和取消粘贴。

Answer 1

找到一个修复:

 <script>
(function($){
        var calc_scroll = function() {
            var header = $('#header').height(),
                scroll = $(window).scrollTop();
                if(scroll >= 450) {
                    $('#sub_menu1').css('padding-top', '30px');
                } else {
                    $('#sub_menu1').css('padding-top', '0px');
                }
        }

        $(window).scroll(function() {
            calc_scroll();
        });
})(jQuery);
</script>