问题描述
我有一个单部分网站,在向下滚动(隐藏上一部分)时会显示部分(关于、服务等)。 我如何使用 JavaScript 代码在显示每个部分时添加 CSS 更改(更改如:显示/隐藏某个徽标、更改主菜单中该部分活动文本的颜色、更改导航菜单的颜色等? 我的意思是:如果这个部分被选中(使用菜单或导航栏)/滚动到(鼠标滚动),那么做 CSS 更改 有什么帮助吗?
类似网站:https://bratsun.com/#hello
解决方法
如果元素在视口中,您可以观看这些元素。 这可能会有所帮助:How can I tell if a DOM element is visible in the current viewport?
如果元素在视口中,则向相应的导航项添加一个类(例如“活动”)
,一个演示 Web 视图,可在标题菜单后向下和向上滚动。该页面没有响应,但您可以将其作为示例来设置更好的页面。
如您所见,function goToSectionPage
负责执行事件以滚动到愿望部分。
另外,你可以优化js代码中function addEventHandlerToHeaderButton
的重复。
function goToSectionPage(sectionElement) {
sectionElement.scrollIntoView({ behavior: "smooth",block: "center" });
}
function addEventHandlerToHeaderButton(buttonId,sectionId) {
const buttonTarget = document.getElementById(buttonId);
buttonTarget.addEventListener("click",function () {
const parentSectionElement = document.querySelector("main");
const targetSection = document.getElementById(sectionId);
goToSectionPage(targetSection);
addCssClassToSelecedtSession(parentSectionElement,targetSection,"selected");
});
}
function addCssClassToSelecedtSession(parentWrapSectionElements,selectedSectionElement,className) {
for(let section of parentWrapSectionElements.children){
section.classList.remove(className)
}
selectedSectionElement.classList.add(className)
}
addEventHandlerToHeaderButton("headerSection1","section1");
addEventHandlerToHeaderButton("headerSection2","section2");
addEventHandlerToHeaderButton("headerSection3","section3");
addEventHandlerToHeaderButton("headerSection4","section4");
addEventHandlerToHeaderButton("headerSection5","section5");
addEventHandlerToHeaderButton("headerSection6","section6");
addEventHandlerToHeaderButton("headerSection7","section7");
addEventHandlerToHeaderButton("headerAbout","about");
.section {
display: block;
height: 50px;
border: 1px solid black;
border-radius: 5px;
margin-bottom: 10px;
padding: 5px;
}
.header-item {
cursor: pointer;
padding: 0 8px;
font-family: system-ui;
font-size: 10px;
color: #00000080;
}
.header-item:hover {
border-bottom: 1px solid black;
}
header {
width: 100%;
position: fixed;
}
main {
padding-top: 45px;
}
.selected {
animation: sectionSelected 2s forwards;
}
@keyframes sectionSelected {
from {
background-color: #fff;
}
to {
background-color: #c4c4c4;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Test</title>
<link rel="stylesheet" href="./stackoverflow.css">
</head>
<body>
<header>
<span id="headerSection1" class="header-item">Go to Section 1</span>
<span id="headerSection2" class="header-item">Go to Section 2</span>
<span id="headerSection3" class="header-item">Go to Section 3</span>
<span id="headerSection4" class="header-item">Go to Section 4</span>
<span id="headerSection5" class="header-item">Go to Section 5</span>
<span id="headerSection6" class="header-item">Go to Section 6</span>
<span id="headerSection7" class="header-item">Go to Section 7</span>
<span id="headerAbout" class="header-item">Go to About</span>
</header>
<main>
<section id="section1" class="section">Section1</section>
<section id="section2" class="section">Section2</section>
<section id="section3" class="section">Section3</section>
<section id="section4" class="section">Section4</section>
<section id="section5" class="section">Section5</section>
<section id="section6" class="section">Section6</section>
<section id="section7" class="section">Section7</section>
<section id="about" class="section">About</section>
</main>
</body>
<script src="./stackoverflow.js"></script>
</html>
https://github.com/stembrino/simple-page-example-scroll-down-up
,您正在寻找 IntersectionObserver
API。
这是一个 educational youtube video on IntersectionObserver
V1。
对于某些极端情况,IntersectionObserver
V2 已在 Chrome 中指定和实现。