Я пытаюсь обновить навигационную панель в зависимости от раздела, на который в данный момент смотрит пользователь.
Он отлично работает, спускаясь вниз, однако прокрутка вверх не работает должным образом, мне нужно немного прокрутить вверх более чем через верх для его правильного обновления.
Вот GIF-файл, показывающий, что я имею в виду: https://imgur.com/a68d1HT
Вот мое приложение. JS:
var Controller = (function() {
setInterval(UIController.changeTitle, 4000);
UIController.showNav();
UIController.updateNav();
});
//-----------------------------------------------------------
var UIController = (function() {
text =["你好!", "こんにちは!", "Привет!", "Hello!"],
counter = 0,
elem = document.getElementById("changeText")
return {
changeTitle: (function() {
elem.classList.add('hide');
setTimeout(function () {
elem.innerHTML = text[counter];
elem.classList.remove('hide');
counter++;
if (counter >= text.length) {
counter = 0;
}
}, 500);
}),
showNav: (function(){
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("nav-bar").style.opacity = "100";
document.getElementById("nav-bar").style.pointerEvents = "all";
} else {
document.getElementById("nav-bar").style.opacity = "0";
document.getElementById("nav-bar").style.pointerEvents = "none";
}
}
}),
updateNav: (function(){
var waypoint1 = new Waypoint({
element: document.getElementById('aboutSection'),
handler: function(direction) {
if (direction === 'down') {
document.getElementById("about-link").classList.add("nav-bar__ul__nav-link__active");
} else {
offset: '100%'
document.getElementById("portfolio-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("about-link").classList.add("nav-bar__ul__nav-link__active");
}
}})
var waypoint2 = new Waypoint({
element: document.getElementById('portfolioSection'),
handler: function(direction) {
if (direction === 'down') {
document.getElementById("about-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("portfolio-link").classList.add("nav-bar__ul__nav-link__active");
} else {
offset: '100%'
document.getElementById("personal-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("portfolio-link").classList.add("nav-bar__ul__nav-link__active");
}
}})
var waypoint3 = new Waypoint({
element: document.getElementById('personalSection'),
handler: function(direction) {
if (direction === 'down') {
document.getElementById("portfolio-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("personal-link").classList.add("nav-bar__ul__nav-link__active");
} else {
offset: '100%'
document.getElementById("contact-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("personal-link").classList.add("nav-bar__ul__nav-link__active");
}
}})
var waypoint4 = new Waypoint({
element: document.getElementById('contactSection'),
handler: function(direction) {
if (direction === 'down') {
document.getElementById("personal-link").classList.remove("nav-bar__ul__nav-link__active");
document.getElementById("contact-link").classList.add("nav-bar__ul__nav-link__active");
} else {
offset: '100%'
document.getElementById("contact-link").classList.add("nav-bar__ul__nav-link__active");
}
}})
}
)
}
})();
Controller();
S CSS:
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-family: 'Noto Sans SC', sans-serif;
font-size: 10px;
scroll-snap-type: y mandatory;
}
html, body {
height: 100%;
}
#changeText {
opacity: 1;
transition: all 1s;
}
.hide {
opacity: 0 !important;
}
section {
scroll-snap-align: start;
}
.scroll-icon {
margin-top: 300px;
position: absolute;
display: block;
font-size: 0.933rem;
color: black;
text-decoration: none;
padding: 10px 10px 10px 40px;
&::before {
display: block;
position: absolute;
top:-2px;
left:0;
width: 24px;
height: 40px;
border: 5px solid black;
border-radius: 12px;
content:"";
}
&::after {
display: block;
position: absolute;
top:9px;
left:11px;
width: 2px;
height: 8px;
background: black;
border-radius: 1px;
content:"";
animation-name: scroll;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 2s;
}
}
@keyframes scroll {
0% { opacity: 1; height: 8px;}
20% { opacity: 1; height: 8px;}
30% { transform: translateY(0); opacity: 1; height: 19px;}
40% { opacity: 1;}
80% { transform: translateY(19px); opacity: 0; height: 0;}
81% { transform: translateY(0); opacity: 0; height: 8px;}
100% { opacity: 1; height: 8px;}
}
.nav-bar {
height: 10vh;
width: 100%;
position: fixed;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
transition: opacity .5s;
opacity: 0;
pointer-events: none;
&__logo {
font-size: 2rem;
margin-left: 50px;
font-family: 'Raleway', sans-serif;
}
&__ul {
display: flex;
flex-direction: row;
width: auto;
&__nav-link {
text-decoration: none;
list-style: none;
margin-right: 50px;
font-size: 2rem;
cursor: pointer;
font-family: 'Raleway', sans-serif;
position: relative;
color: black;
border: solid 5px transparent;
padding: 5px;
&__active {
border: solid 5px black;
border-radius: 10px;
}
}
&__nav-link:hover {
color: black;
}
&__nav-link:hover:before {
visibility: visible;
background-color: black;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
&__nav-link:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: -5px;
left: 0;
background-color: #333;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
}
}
section {
width: 100%;
height: 100vh;
}
.banner {
height: 10vh;
width: 100%;
}
.landing-section {
display: flex;
align-items: center;
justify-content: center;
&__header {
font-size: 10rem;
font-weight: bold;
opacity: 1;
transition: opacity 0.5s;
}
}
.portfolio-section, .personal-section, .contact-section, .about-section {
}
.about-section {
background-color: hotpink;
}
.portfolio-section {
background-color: red;
}
.personal-section {
background-color: green;
}
.contact-section {
background-color: purple;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Raleway:900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC|Raleway:900&display=swap" rel="stylesheet">
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
<link type="text/css" rel="stylesheet" href="style.css">
<title>Lewis Donley</title>
</head>
<body>
<div class="container">
<nav class="nav-bar" id="nav-bar">
<h2 class="nav-bar__logo">Logo</h2>
<ul class="nav-bar__ul">
<li class="nav-bar__ul__nav-link" id="about-link">About</li>
<li class="nav-bar__ul__nav-link" id="portfolio-link">Portfolio</li>
<li class="nav-bar__ul__nav-link" id="personal-link">Personal</li>
<li class="nav-bar__ul__nav-link" id="contact-link">Contact</li>
</ul></nav>
<section class="child landing-section">
<h1 class="landing-section__header" id="changeText">Hello!</h1>
<a class="scroll-icon" href="#"></a>
</section>
<section class="child about-section" id="aboutSection">
<div class="banner"></div>
<h1 class="landing-section__header" id="changeText">About</h1></section>
<section class="child portfolio-section" id="portfolioSection"><div class="banner"></div>
<h1 class="landing-section__header" id="changeText">Portfolio</h1></section>
<section class="child personal-section" id="personalSection">
<div class="banner"></div>
<h1 class="landing-section__header" id="changeText">Personal</h1></section>
<section class="child contact-section" id="contactSection">
<div class="banner"></div>
<h1 class="landing-section__header" id="changeText">Contact</h1></section>
</div>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script src="/node_modules/waypoints/lib/noframework.waypoints.min.js"></script>
<script src="app.js"></script>
</body>
</html>