//IntersectionObserver permite configurar una función callback
//que es llamada cada vez que un elemento, llamado target,
//intersecta con otro, bien el viewport o un elemento específico
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
//IntersectionObserver permite configurar una función callback
//que es llamada cada vez que un elemento, llamado target,
//intersecta con otro, bien el viewport o un elemento específico
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting)
{
asignarClase(entries[0].target);
}
//el valor threshold indica que porcentaje del elemento debe estar
//visible 0 = esta en linea con el viewport, 1 = esta totalmente visible
//0.1 se muestra el 10% etc
}, { threshold: [0.1] });
//agregar aquí los selectores de los elementos a observar en el scroll
observer.observe(document.querySelector("#inicio"));
observer.observe(document.querySelector("#trabajos"));
observer.observe(document.querySelector("#about"));
function asignarClase(target){
//obtener los elementos del menu
var elementosMenu = document.querySelectorAll("ul li a");
//actualizar clase current
elementosMenu.forEach(e => {
//extraer el valor del href del elemento del menu
valorhref = e.href.split("#")[1]
//si el valor del href es igual al id del target agregar
//clase current
if(valorhref === target.id){
e.parentNode.classList.add("current");
}else{
//si el valor no es igual remover clase current
e.parentNode.classList.remove("current");
}
})
}