首頁猿問每當我滾動瀏覽該部分時，突出顯示我...

每當我滾動瀏覽該部分時，突出顯示我的導航欄菜單項？僅使用 Javascript

JavaScript

小怪獸愛吃肉 2022-06-16 17:29:32

我目前在單擊導航菜單項時會突出顯示它們，但我希望 HTML 中的整個部分具有突出顯示的背景，因此當用戶滾動瀏覽網站時，它將根據哪個選項自動突出顯示導航菜單項他們正在滾動瀏覽的部分這是我試圖用我的代碼 https://codepen.io/joxmar/pen/NqqMEg實現的關于 codepen 的示例這是我在 Jsfiddle https://jsfiddle.net/hzg02k3n/中的當前登錄頁面正如您從我的 jsfiddle 中看到的那樣，當我單擊鏈接時，鏈接會突出顯示，但每當我滾動該部分時，我需要它變為活動狀態。在我當前的 HTML 代碼下方<header class="page__header"> <nav class="navbar__menu">  <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>

<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>

<h2>Section 1</h2>

</div>

<h2>Section 2</h2>

</div>

<h2>Section 3</h2>

</div>

<h2>Section 4</h2>

</div>

</section>

</body>

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>

反對回復 2022-06-16

1 回答
0 關注
105 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

每當我滾動瀏覽該部分時，突出顯示我的導航欄菜單項？僅使用 Javascript

每當我滾動瀏覽該部分時，突出顯示我的導航欄菜單項？僅使用 Javascript

1 回答

添加回答

每當我滾動瀏覽該部分時，突出顯示我的導航欄菜單項？僅使用 Javascript

每當我滾動瀏覽該部分時，突出顯示我的導航欄菜單項？僅使用 Javascript