如何修复顶部导航栏粘滞位置？

Question

我使用 WP 5.3 27 个子主题，但我不想编辑模板，所以我添加了所需的第二个（实际上它成为显示顺序中的第一个）divwrap em> 部分到具有波纹管功能的顶部导航菜单。问题是我在此之后失去了菜单的固定位置（现在不再粘了）。如何补救？我玩过 CSS 代码，但没有成功。讨论中的网站是here。

function my_navigation_top( $slug, $name ) {
    if( $name == 'top' ) { ?>
        --- some content here ---
        </div> <!-- wrap closed -->
        <div class="wrap"> <!-- wrap opened -->
    <?php }
}
add_action( 'get_template_part_template-parts/navigation/navigation', 'my_navigation_top', 10, 2 );

更新

如果我在包装内添加一个简单的 div 部分而不是第二个 div 包装部分，则不会出现问题。

Answer 1

我正在查看设置固定类的脚本文件（向下滚动时使顶部导航变粘）。 （文件：二十七/资产/js/global.js） 如果导航的高度太高，似乎没有设置固定类：

    // Set properties of navigation.
    function setNavProps() {
        navigationHeight      = $navigation.height();
        navigationOuterHeight = $navigation.outerHeight();
        navPadding            = parseFloat( $navWrap.css( 'padding-top' ) ) * 2;
        navMenuItemHeight     = $navMenuItem.outerHeight() * 2;
        idealNavHeight        = navPadding + navMenuItemHeight;
        navIsNotTooTall       = navigationHeight <= idealNavHeight;
    }

    // Make navigation 'stick'.
    function adjustScrollClass() {

        // Make sure we're not on a mobile screen.
        if ( 'none' === $menuToggle.css( 'display' ) ) {

            // Make sure the nav isn't taller than two rows.
            if ( navIsNotTooTall ) {

                // When there's a custom header image or video, the header offset includes the height of the navigation.
                if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
                    headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
                } else {
                    headerOffset = $customHeader.innerHeight();
                }

                // If the scroll is more than the custom header, set the fixed class.
                if ( $( window ).scrollTop() >= headerOffset ) {
                    $navigation.addClass( navigationFixedClass );
                } else {
                    $navigation.removeClass( navigationFixedClass );
                }

            } else {

                // Remove 'fixed' class if nav is taller than two rows.
                $navigation.removeClass( navigationFixedClass );
            }
        }
    }

我不完全确定解决方案是什么。一个想法（这并不理想）是调整 .js 文件并将 true 放在 ( ) 之间，而不是在这一行上放置 navIsNotTooTall：

if ( navIsNotTooTall ) {

如果您想将此更改添加到子主题，而不是主主题：将更改后的 global.js 文件放在您的子主题目录中：twentyseventeen-child/assets/js/global.js

然后将此添加到子主题的functions.php：

add_action( 'wp_enqueue_scripts', 'override_globaljs_script', 100 );
function override_globaljs_script()
{
    wp_dequeue_script( 'twentyseventeen-global' );
    wp_deregister_script( 'twentyseventeen-global' );

    wp_enqueue_script( 'twentyseventeen-global-child', get_stylesheet_directory_uri() . '/assets/js/global.js' );
}

它将注销主主题 global.js 并将其注册为子主题。就我而言，这是“正确”的 Wordpress 方式。