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

Question

我用的是WP 5.3 Twenty 17子主题，但我不想编辑模板，所以我加了一个需要的第二个(实际上它变成了显示顺序中的第一个)div < em>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

我正在查看设置固定类的脚本文件(向下滚动时使顶部导航粘滞)。 (文件:twentyseventeen/assets/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 方式。