I'm a beginner programmer and I'm trying to create this effect that when I scroll past a specific element in the HTML, The colors of the buttons in my navbar change colors. I thought the correct way of doing this was jQuery. I'm having problems getting the position of the elements in the page. I have tried with the position() and offset() methods. But neither seem to work.
I want to get the vertical positions of the elements with the IDs "info" and "security". I have these methods aren't very reliable in certain cases, but I can't find an alternative.
This is the code I have so 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");
}
}
});`
Thank you for the advice in advance!!
The objective mentioned is to let NAV bar change based on the position that you scrolled to. First you need to get your target ID scroll position.Use code below to get every archor element ID:
$('#testB').position().top
(In jQuery, position will return you the left and top value, here we use top only.) Second, get the current scroll position.Use code below:
currentHeight = $(window).scrollTop();
Third, write related jQuery code to change NAV elements.Sample JS as below: Here we have 5 DIV (#testA to E) and 4 nav buttons (#test1 to 4)
$(window).scroll(function () {
var currentHeight = $(window).scrollTop();
if (currentHeight <= $('#testB').position().top) {
$("#test1").addClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testC').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").addClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").removeClass('active-blue');
} else if (currentHeight <= $('#testD').position().top) {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").addClass('active-blue');
$("#test4").removeClass('active-blue');
} else {
$("#test1").removeClass('active-blue');
$("#test2").removeClass('active-blue');
$("#test3").removeClass('active-blue');
$("#test4").addClass('active-blue');
}
});
Here you go.
//Declare these first
const infopos = $( "#info" ).scrollTop();
const secpos = $("#security").scrollTop();
$(window).on('load', function(){
window.loaded = true;
console.log("LOADED");
});
$( window ).scroll(function() {
if (window.loaded === true){
let scrollTop = $(window).scrollTop();
if (scrollTop < infopos-25) { //scrollTop >= 0 will always be true so skip it
$( "#navgeneral" ).addClass("active");
$( "#navinfo" ).removeClass("active");
$( "#navsecurity" ).removeClass("active");
}
else if (scrollTop >= infopos && scrollTop < secpos){
$( "#navgeneral" ).removeClass("active");
$( "#navinfo" ).addClass("active");
$( "#navsecurity" ).removeClass("active");
}
}
});`
First get a good understanding of how variables work and please try to use let instead of var most of the time while declaring variables. This will prevent accidentally overwriting global variables.