Question

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

菜单1使用position: fixed; min-height: 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>

粘性子菜单的起点

1 个答案: