As a novice programmer, I am embarking on the challenge of creating an interesting effect for my website. My goal is to change the color of the navigation buttons when a specific element is scrolled past in the HTML document. Initially, I thought utilizing jQuery would be the best approach for this task. However, I have encountered difficulties in determining the position of elements on the page. Despite experimenting with the position() and offset() methods, I haven't been able to achieve the desired outcome.
I am particularly interested in obtaining the vertical positions of the elements identified by the IDs "info" and "security". While I understand that these methods may not always be reliable, I am struggling to identify a suitable alternative.
Here is a snippet of the code I have developed thus far:
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$(window).scroll(function() {
if (window.loaded == true){
var scrollTop = $(window).scrollTop();
var infopos = $("#info");
var secpos = $("#security");
if (scrollTop >= 0 && scrollTop < infopos - 25) {
$("#navgeneral").addClass("active");
$("#navinfo").removeClass("active");
$("#navsecurity").removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$("#navgeneral").removeClass("active");
$("#navinfo").addClass("active");
$("#navsecurity").removeClass("active");
}
}
});`
Your suggestions and guidance will be greatly appreciated! Thanks in advance.