Soy un programador principiante y estoy tratando de crear este efecto de que cuando me desplazo más allá de un elemento específico en el HTML, los colores de los botones en mi barra de navegación cambian de color. Pensé que la forma correcta de hacer esto era jQuery. Tengo problemas para obtener la posición de los elementos en la página. He probado con los métodos position() y offset(). Pero ninguno parece funcionar.
Quiero obtener las posiciones verticales de los elementos con los ID "info" y "security". Tengo estos métodos no son muy confiables en ciertos casos, pero no puedo encontrar una alternativa.
Este es el código que tengo hasta ahora:
$(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"); } } });`Gracias por el consejo de antemano!!
El objetivo mencionado es permitir que la barra NAV cambie según la posición a la que se desplazó. Primero debe obtener la posición de desplazamiento de su ID de destino. Use el código a continuación para obtener cada ID de elemento archor:
$('#testB').position().top(En jQuery, position le devolverá el valor izquierdo y superior, aquí solo usamos top). Segundo, obtenga la posición de desplazamiento actual. Use el código a continuación:
currentHeight = $(window).scrollTop();En tercer lugar, escriba el código jQuery relacionado para cambiar los elementos NAV. Ejemplo de JS como se muestra a continuación: aquí tenemos 5 DIV (#testA a E) y 4 botones de navegación (#test1 a 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'); }});
Aquí tienes.
//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"); } } });` Primero obtenga una buena comprensión de cómo funcionan las variables e intente usar let en lugar de var la mayor parte del tiempo al declarar variables. Esto evitará que se sobrescriban accidentalmente las variables globales.