В верхней части моей веб-страницы есть панель навигации со ссылками на различные разделы:
При прокрутке вниз страницы я хочу, чтобы соответствующая ссылка изменила цвет.
Как мне это сделать?
Полный снимок экрана: (https://eksiup.com/30f40ee79361)
Мой код CSS выше;
.custom-nav .navbar-nav li a:hover,
.custom-nav .navbar-nav li a:active,
.custom-nav .navbar-nav li.active a {
color: #0AF3A9 !important;
}
Мой HTML-код выше;
<!-- Start Header -->
<header id="header">
<!-- Start Navbar-->
<nav class="navbar fixed-top navbar-expand-lg custom-nav">
<div class="container">
<a class="navbar-brand" href="index.html">
<img class="img-fluid" src="assets/images/logo.png" height="33" width="94" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#feature">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#screenshot">Screenshot</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price">Price</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#team">Team</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#faq">FAQ's</a>
</li>
<li class="nav-item">
<a class="nav-link pr-0" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar-->
</header>
<!-- End Header -->
<!-- Start Banner -->
<section id="home">
<div class="container">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6">
<div class="banner-content">
<h1>Increase your productivity
with Firez</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. </p>
<div class="holder-link">
<a href="#" class="mr-3">
<img class="img-fluid" src="assets/images/app-store.png" width="161" height="55" alt="appstore image">
</a>
<a href="#">
<img class="img-fluid" src="assets/images/play-store.png" width="160" height="54" alt="googleplay image">
</a>
</div>
<div class="arrow bounce">
<a href="#about-us">
<i class="fa fa-arrow-circle-down"></i>
</a>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 banner-right">
<img class="img-fluid" src="assets/images/app.png" width="950" height="748">
</div>
</div>
<div class="rounded-shape-1 d-none d-sm-block"></div>
<div class="rounded-shape-2 d-none d-sm-block"></div>
<div class="rounded-shape-3 d-none d-sm-block"></div>
</div>
<div class="bottom-shape">
<img class="img-fluid" src="assets/images/bottom-shape.png" alt="bottom-shape image">
</div>
</section>
<!-- End Banner -->
<!-- Start AboutUs -->
<section id="about-us" class="section">
<div class="container">
<div class="row">
<div class="col-xl-5 col-lg-5 col-md-5 vertical-image">
<img class="img-fluid" src="assets/images/about-us.png" width="800" height="820" alt="about-us image">
</div>
<div class="col-xl-7 col-lg-7 col-md-7 sub-title about-us-right">
<h2>Complete Firez once and use it anywhere</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
<div class="row mt-5">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
<div class="text-center">
<img class="img-fluid" src="assets/icon/fantastic-design.png" width="60" height="60" alt="fantastic-design icon">
<div class="mt-4">
<h5 class="card-title">Fantastic Design</h5>
<p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
<div class="text-center">
<img class="img-fluid" src="assets/icon/security.png" width="60" height="60" alt="security icon">
<div class="mt-4">
<h5 class="card-title">High Security</h5>
<p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 about-item">
<div class="text-center">
<img class="img-fluid" src="assets/icon/options.png" width="60" height="60" alt="options icon">
<div class="mt-4">
<h5 class="card-title">Advanced Options</h5>
<p class="card-text mt-0">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End AboutUs -->