wordpress-突出显示滚动上的导航链接

ix0qys7i  于 2021-09-23  发布在  Java
关注(0)|答案(0)|浏览(139)

我能够成功地将代码添加到script.js文件中,以便在向下滚动页面时突出显示nav部分中的链接。
但是自从我将我的网页转换成wordpress模板后,允许突出显示导航链接的javascript就不再起作用了。
我已经尝试过使用代码,试图让它再次工作,但没有任何效果。
我不知道这是如何工作,现在我正试图在wordpress做同样的事情。
下面是旧代码。非常感谢您的帮助。

/* Script.js */

const sections = document.querySelectorAll('section');
const navLi = document.querySelectorAll('nav .container ul li');

window.addEventListener('scroll', () => {

    let current = '';

    sections.forEach( section => {

        const sectionTop = section.offsetTop;
        const sectionHeight = section.clientHeight;

        if (pageYOffset >= sectionTop) {

            current = section.getAttribute('id');

        }
    });

    navLi.forEach( li => {

        if (pageYOffset <= 1710) {

            li.classList.remove('active-section');

            if( li.classList.contains(current) ) {
                li.classList.add('active-section');
            }

        } else {

            current = 'contact';
            li.classList.remove('active-section');

            if( li.classList.contains(current = 'contact') ) {
                li.classList.add('active-section');
            }
        }

    });

});
<!-- header.php -->

<nav id="nav" <?php echo (is_admin_bar_showing()) ? ' style="top: 32px;" ' : ''; ?>>

    <div class="container">

        <!-- hamburger menu -->
        <input type="checkbox" id="check">

        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>

        <!-- nav-logo -->
        <p id="logo">lf</p>

        <!-- nav links -->
        <?php

            //
            if( has_nav_menu( "port-nav-menu" )) {
                wp_nav_menu(array(
                    "theme_location" => "port-nav-menu",
                    "container" => ""
                ));
            }

        ?>

    </div>
</nav>
/* style.css */

nav {
    display: flex;
    position: fixed;
    text-transform: uppercase;
    top: 0%;
    width: 100%;
    z-index: 1;
}

nav a:link, nav a:visited {
    color: #ffffff;
    text-decoration: none;
}

nav .container ul li.active-section {
    background: #e31b6d;
}

nav a:hover {
    color: #e31b6d;
}

nav ul {
    display: flex;
    float: right;
    line-height: 50px;
    list-style-type: none;
    margin: auto;
}

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题