I am currently building a single page using Angular 6. The page is quite basic, and my goal is to emphasize the navbar based on scrolling.
Below is the code snippet I am working with:
.sticky {
position: sticky;
top: 0;
}
#i ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: blue;
}
#i li {
float: left;
}
#i li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#i li a:hover {
border-radius: 0px 0px 10px 10px;
background-color: rgb(43, 137, 226);
}
/* #i {
margin: 0px 0px 40px 0px;
} */
#footer-id {
background-color:blue;
}<span id="i">
<ul class="sticky">
<li id="i"><a class="active" href="#">Home</a></li>
<li><a href="#news" (click)="scrollToElement(new)">News</a></li>
<li><a href="#contact" (click)="scrollToElement(con)">Contact</a></li>
<li><a href="#about" (click)="scrollToElement(about)">About</a></li>
<ul class="nav navbar-nav pull-right">
<li class="nav"><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="nav">
<a href="#ta" (click)="scrollToElement(con)">Target</a>
</li>
</ul>
</ul>
</span>
<div class="container" style="margin-bottom: 20px;">
<div #home>
<br />
<br />
<h1>Home</h1>
<p>You can contact us here. Thank you for your greatness.</p>
<p>
Welcome to the Random Phrase and Idiom Generator. This tool can be very helpful for expanding your vocabulary...
</p>
<p>
Welcome to the Random Phrase and Idiom Generator. This tool can be very helpful for expanding your vocabulary...
</p>
</div>
<div #con>
<br />
<br />
<h1>Contact</h1>
<p>You can reach out to us here. Appreciate your support!</p>
<p>
Idioms are a wonderful part of the English language that add flavor and depth to communication...
</p>
<p>
Idioms are a wonderful part of the English language that add flavor and depth to communication...
</p>
</div>
<div #new>
<br />
<br />
<h1>News</h1>
<p>This contains our latest news updates.</p>
<p>
Using this tool can enhance language learning...
</p>
<p>
Using this tool can enhance language learning...
</p>
</div>;
<div #about>
<br />
<br />
<h1>About</h1>
<p>This showcases more information about us.</p>
<p>
It offers writers an opportunity to boost creativity...
</p>
<p>
It offers writers an opportunity to boost creativity...
</p>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small indigo" id="footer-id">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Very long link 1</a></li>
<li><a href="#!">Very long link 2</a></li>
<li><a href="#!">Very long link 3</a></li>
<li><a href="#!">Very long link 4</a></li>
</ul>
</div>
...
<div class="col-md-3 mx-auto">
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">Links</h5>
<ul class="list-unstyled">
<li><a href="#!">Link 1</a></li>
...
</ul>
</div>
...
</footer>I am exploring ways to highlight the navbar elements as I scroll down the page. After researching, I discovered that using HostListener might help achieve this effect:
@HostListener('window:scroll', ['$event'])
scrollHandler(event) {
console.log('Scroll Event');
const verticalOffset =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop ||
0;
console.log(verticalOffset);
}
Despite implementing some solutions, I'm still struggling to connect the scrolling behavior with specific divs. Any insights or suggestions would be greatly appreciated.