我能够成功地将代码添加到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;
}
暂无答案!
目前还没有任何答案,快来回答吧!