我目前在单击导航菜单项时会突出显示它们，但我希望 HTML 中的整个部分具有突出显示的背景，因此当用户滚动浏览网站时，它将根据哪个选项自动突出显示导航菜单项他们正在滚动浏览的部分这是我试图用我的代码 https://codepen.io/joxmar/pen/NqqMEg实现的关于 codepen 的示例这是我在 Jsfiddle https://jsfiddle.net/hzg02k3n/中的当前登录页面正如您从我的 jsfiddle 中看到的那样，当我单击链接时，链接会突出显示，但每当我滚动该部分时，我需要它变为活动状态。在我当前的 HTML 代码下方<header class="page__header"> <nav class="navbar__menu"> <!-- Navigation starts as empty UL that will be populated with JS --> <ul id="navbar__list"></ul> </nav> </header> <main> <header class="main__hero"> <h1>Landing Page</h1> </header><section id="section1" data-nav="Section 1" class="active"> <div class="landing__container"> <h2>Section 1</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis sollicit </p> <p> Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum l </p> </div> </section> <section id="section2" data-nav="Section 2"> <div class="landing__container"> <h2>Section 2</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi fermentum metus faucibus lectus pharetra dapibus. Suspendisse potenti. Aenean aliquam elementum mi, ac euismod augue. Donec eget lacinia ex. Phasellus imperdiet porta orci eget mollis. Sed convallis s </p> <p> Aliquam a convallis justo. Vivamus venenatis, erat eget pulvinar gravida, ipsum l </p> </div> </section>我最多有 4 个部分，但这仅显示前两个部分。
1 回答
倚天杖
TA贡献1828条经验 获得超3个赞
只需利用mouseover和mouseout事件！
这是一个小例子&这里也是一个 JS Fiddle：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family : "Arial", sans-serif;
}
#navbar__list {
height : 40px;
background-color : #55443D;
display : block;
align-content : center;
align-items : center;
position : fixed;
top : 0;
left : 0;
width : 100vw;
z-index : 1;
margin : 0 auto;
}
#navbar__list ul {
padding : 0;
list-style : none;
position : relative;
display : table;
margin : 0 auto;
}
#navbar__list li {
display : table-cell;
}
#navbar__list li a {
padding : 10px 20px;
display : block;
color : white;
text-decoration : none;
transition : all 0.3s ease-in-out;
}
#navbar__list li a:hover {
color : #dc5c26;
}
#navbar__list li a .active {
color : #F38A8A;
border-bottom : 3px solid #F38A8A;
}
.active {
color : #F38A8A;
border-bottom : 3px solid #F38A8A;
}
.sec {
height : 50vh;
display : block;
}
.sec h2 {
position : relative;
top : 50%;
left : 50%;
}
#section1 {
background-color : green;
}
#section2 {
background-color : yellow;
}
#section3 {
background-color : blue;
}
#section4 {
background-color : grey;
}
</style>
</head>
<body>
<ul id="navbar__list"></ul>
<section class="container">
<div id="section1" class="sec">
<h2>Section 1</h2>
</div>
<div id="section2" class="sec">
<h2>Section 2</h2>
</div>
<div id="section3" class="sec">
<h2>Section 3</h2>
</div>
<div id="section4" class="sec">
<h2>Section 4</h2>
</div>
</section>
</body>
<script>
const navMenu = document.querySelectorAll( "section" );
const navList = document.getElementById( "navbar__list" );
const items = [ "Section 1", "Section 2", "Section 3", "Section 4" ];
let lastId;
let last_known_scroll_position = 0;
let ticking = false;
//Build the nav
items.forEach( ( item, i ) => {
const li = document.createElement( "li" );
const el = document.createElement( "a" );
el.innerText = item;
el.classList.add( "menu-items" );
el.setAttribute( "id", `menu-${i + 1}` );
el.href = `#section${i + 1}`;
el.addEventListener( "click", function ( e ) {
const href = e.target.getAttribute( "href" ),
offsetTop = href === "#" ? 0 : e.target.offsetTop - topMenuHeight + 1;
const scrollOptions = { scrollIntoView: true, behavior: "smooth" };
e.target.scrollIntoView( scrollOptions );
e.preventDefault();
} );
navList.appendChild( li );
li.appendChild( el );
} );
const topMenu = document.getElementById( "navbar__list" );
const topMenuHeight = topMenu.offsetHeight + 1;
const menuItems = document.querySelectorAll( ".menu-items" );
const scrollItems = document.querySelectorAll( ".sec" );
//Make Nav Active when Clicked and scrolls down to section
document.addEventListener( "click", function ( event ) {
let active = document.querySelector( ".active" );
if ( active ) {
active.classList.remove( "active" );
}
if ( event.target.classList.contains( "menu-items" ) ) {
event.target.classList.add( "active" );
}
} );
// Bind to scroll
window.addEventListener( "scroll", function () {
// Get container scroll position
const container = document.querySelector( ".container" );
let fromTop = window.pageYOffset + topMenuHeight + 40;
// Get id of current scroll item
let cur = [];
[ ...scrollItems ].map( function ( item ) {
if ( item.offsetTop < fromTop ) {
cur.push( item );
}
} );
// Get the id of the current element
cur = cur[ cur.length - 1 ];
let id = cur ? cur.id : "";
if ( lastId !== id ) {
lastId = id;
menuItems.forEach( function ( elem, index ) {
elem.classList.remove( "active" );
const filteredItems = [ ...menuItems ].filter( elem => elem.getAttribute( "href" ) === `#${id}` );
filteredItems[ 0 ].classList.add( "active" );
} );
}
} );
</script>
</html>
添加回答
举报
0/150
提交
取消