如何修复顶部导航栏位置卡住？

Question

我用的是WP 5.3 Twenty 17 child theme，但是我不想编辑模板，所以我添加了一个需要的第二个（实际上它成为了显示顺序中的第一个）div wrap 部分到带有波纹管功能的顶部导航菜单。问题是我在这之后失去了菜单的固定位置（现在它不再粘了）。如何解决这个问题？我玩过 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

我正在查看设置固定 class 的脚本文件（向下滚动时顶部导航会变粘）。（文件：twentyseventeen/assets/js/global.js）如果导航的高度太高，似乎固定 class 没有设置：

    // 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 并将其注册为子主题。就我而言，这是 'proper' Wordpress 的方式。

如何修复顶部导航栏位置卡住？

How to repair the top navigation bar sticky position?

css

wordpress

navigationbar

twentyseventeen