Currently utilizing intersection observer to toggle the visibility of the sticky navbar and make the scroll bar sticky. I am now looking to add a feature where the sub nav options highlight with color as we scroll, focusing on the container with a specific ID near the sticky navbar.
I have attempted various methods but have not been able to achieve the desired outcome.
Below is what I have tried:
<template>
<div>
<div id="sticky-nav" class="sticky-nav">
<a>menu1</a>
<a>menu2</a>
<a>menu3</a>
</div>
<div id="content" class="content">
<div class="content-div" id="div1">Div 1</div>
<div class="content-div" id="div2">Div 2</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
const options = {
root: null,
threshold: 0.5,
};
const observer = new IntersectionObserver(
this.handleIntersection,
options
);
observer.observe(document.getElementById('content'));
},
methods: {
handleIntersection(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
const stickyNavHeight = document.getElementById('sticky-nav').clientHeight;
const div1Top = document.getElementById('div1').offsetTop - stickyNavHeight;
const div2Top = document.getElementById('div2').offsetTop - stickyNavHeight;
console.log('Position of Div 1:', div1Top);
console.log('Position of Div 2:', div2Top);
}
});
},
},
};
</script>
<style scoped>
.sticky-nav {
}
.content {
}
.content-div {
}
</style>
Expected Solution: Looking for a way to determine the closest div (div1, div2, etc.) to the element with the ID "sticky-nav" when scrolling. Open to any alternative approaches as well.