3

SOLUCIONADO

Solución aquí

Mi Index, es una full page, donde cada section es exactamente 100vh de height. He creado un script que hace que si hago scroll, mi web se pasa a la otra section de golpe.

Estoy añadiendo unas barras en el lateral, que aumentan o disminuyen para indicar si estoy en una section u otra. Me gustaría hacer que si por ejemplo estoy en la section #home, la primera barra es más larga, y si hago scroll a la section #about, la primera barra se encoge y la segunda se hace más larga.

He usado esta librería para el efecto de scroll: https://github.com/fabeat/responsive-fullpage-scroll

Añadido:

Ahora mismo el scroll me sigue funcionando, sin embargo, al hacer scroll no se "amplia" ninguna a, sin embargo al llegar a la tercera section se amplían todas:

Aquí os dejo el código:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var fps = new FullPageScroll('wrap', {
            mediaQuery: 'screen and (min-width: 800px)',
            goToTopOnLast: false
        });
        fps.onslide = function (e) {
            console.log("Slide " + (e.target.currentSlide + 1) + " of " + e.target.slides.length);
            document.querySelectorAll("#lineas a").forEach((link, index) => {
                if (index === e.target.currentSlide) {
                    //añado estilos para indicar que está activa
                    $("#lineas a").addClass('activo');
                } else {
                    //elimino estilos
                    $("#lineas a").removeClass('activo');
                }
            });
            
        }
        document.querySelectorAll('a.top').forEach(function (el) {
            el.addEventListener('click', function (event) {
                event.preventDefault();
                fps.goToFirstSlide();
            });
        });
    });
</script>

#wrap {
    position: relative;
    overflow: hidden;
  background: #333;
}

#wrap section {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#lineas
{
    position: fixed;
    top: 50vh;
    left: 0px;
}

#lineas a
{
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 5px;
    background: #fff42e;
    margin: 30px 0px;
    cursor: pointer;
}

#lineas .activo
{
    width: 88px;
}
<div id="wrap">
    <section id="home">...</section>
    <section id="about">...</section>
    <section id="work">...</section>
</div>


<div id="lineas">
    <a href="#home" class="first activo"></a>
    <a href="#about" class="second"></a>
    <a href="#work" class="third"></a>
</div>

<script src="https://cdn.jsdelivr.net/gh/fabeat/responsive-fullpage-scroll@v1.0.3/dist/fullpage-scroll.js"></script>

El efecto de scroll funciona perfectamente pero no se me ocurre como hacer el efecto mencionado. Es un proyecto hecho con Django.

Muchas gracias :)

4
  • He asumido que estás usando esta librería para crear el fragmento. Si no es así, por favor pulsa en editar y añade la que estás usando para poder reproducir tu escenario fielmente. el 20 abr. 2021 a las 8:07
  • Por otro lado, te recomiendo completar el recorrido de bienvenida de bienvenida. La sección de Cómo preguntar no viene mal leerla, pero tu pregunta ya está bien expuesta el 20 abr. 2021 a las 8:15
  • @PabloLozano se me olvidó añadirla, perdón, la librería que usé es esta github.com/fabeat/responsive-fullpage-scroll el 20 abr. 2021 a las 8:55
  • Parece un clon de la que encontré, los métodos y propiedades son casi iguales. Mi respuesta debería seguir funcionando, creo el 20 abr. 2021 a las 9:02

4 respuestas 4

1

No es tan complicado, solo tienes que eliminar la clase activo de todos los enlaces y usar el índice de la sección actual (ya lo tienes en e.target.currentSlide) para agregarla al que corresponda:

document.addEventListener("DOMContentLoaded", function () {
    // Obtener todos los enlaces en una lista de nodos
    let lineas = document.querySelectorAll('#lineas a');

    let fps = new FullPageScroll('wrap', {
        mediaQuery: 'screen and (min-width: 600px)',
        goToTopOnLast: false
    });
    fps.onslide = function (e) {
        // Eliminar clase en todas las líneas
        lineas.forEach(linea => linea.classList.remove('activo'));
        // Agregar clase a elemento actual
        lineas[e.target.currentSlide].classList.add('activo');
    }
    // Agregar evento a los enlaces
    lineas.forEach((linea, x) => {
        linea.addEventListener('click', (e) => {
            // El enlace hace scroll y afecta a la función .goToSlide()
            e.preventDefault();
            // Seleccionar sección por índice de enlace que recibió clic
            fps.goToSlide(x);
        });
    });
    document.querySelectorAll('a.top').forEach(function (el) {
        el.addEventListener('click', function (event) {
            event.preventDefault();
            fps.goToFirstSlide(0);
        });
    });
});
#wrap {
    position: relative;
    overflow: hidden;
    background: #333;
}

#wrap section {
    box-sizing: border-box;
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#wrap section:nth-child(1) { background:#800; }
#wrap section:nth-child(2) { background:#080; }
#wrap section:nth-child(3) { background:#008; }

#lineas {
    position: fixed;
    top: 50vh;
    left: 0px;
}

#lineas a {
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 5px;
    background: #fff42e;
    margin: 30px 0px;
    cursor: pointer;
}

#lineas .activo
{
    width: 88px;
}
<div id="wrap">
    <section id="home">...</section>
    <section id="about">...</section>
    <section id="work">...</section>
</div>


<div id="lineas">
    <a href="#home" class="first activo"></a>
    <a href="#about" class="second"></a>
    <a href="#work" class="third"></a>
</div>

<script src="https://cdn.jsdelivr.net/gh/fabeat/responsive-fullpage-scroll@v1.0.3/dist/fullpage-scroll.js"></script>

6
  • ¡Muchas gracias! ¡Me funcionó perfectamente! Aún tengo mucho camino que recorrer en este mundo de la programación. el 20 abr. 2021 a las 15:51
  • Me sabe fatal pedir ayuda y preguntarte... estoy intentando hacer también que al hacer click sobre los elementos a, haga también esa función de scroll y de ampliación de las lineas. Supongo que tendría que crear un script similar sin embargo añadiendo un if(lineas.is(':active')) { el 20 abr. 2021 a las 16:07
  • @MiguelPayá, edité la pregunta para escuchar clic en los enlaces, revisa si funciona; me basé en este ejemplo, llegando desde en enlace que proporcionaste para la documentación.
    – Triby
    el 20 abr. 2021 a las 16:19
  • no del todo, si que es cierto que hace scroll al hacer click, pero, por ejemplo ahora mismo tengo 3 sections y al hacer click en el tercer a, baja incluso más abajo de mi tercer section, dónde no hay nada el 20 abr. 2021 a las 16:28
  • @MiguelPayá, solo faltaba evitar el comportamiento "normal" de los enlaces con e.preventDefault();, ya funciona correctamente.
    – Triby
    el 20 abr. 2021 a las 16:51
1

Si he acertado con la librería que estás usando podrías hacer algo como

fps.onslide = function () {
  document.querySelectorAll("#lineas a").forEach((link, index) => {
    if (index === fps.currentSlide) {
      //añado estilos para indicar que está activa
    } else {
      //elimino estilos
    }
  });
};
1
  • Me sigue sin funcionar, me da varios errores el 20 abr. 2021 a las 15:16
0

Te doy unas funciones muy útiles para detectar cuando un elemento entre al viewport del usuario.

Función para detectar el desplazamiento de un elemento:

offset(e) {
    let top = 0;
    let left = 0;

    if (e.offsetParent) {
      do {
        top += e.offsetTop;
        left += e.offsetLeft;

      } while (e = e.offsetParent);
    }
    return {
      top: parseInt(top),
      left: parseInt(left)
    }
  }

Función para detectar el alto del viewport:

viewport() {
    let x = 0;
    let y = 0;

    if (typeof window.innerHeight != 'undefined') {
      x = window.innerWidth
      y = window.innerHeight
    }
    else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth != 'undefined'
     && document.documentElement.clientWidth != 0) {
      x = document.documentElement.clientWidth;
      y = document.documentElement.clientHeight;
    }
    else {
      x = document.getElementsByTagName('body')[0].clientWidth;
      y = document.getElementsByTagName('body')[0].clientHeight;
    }
    return {
      width: x,
      height: y
    }
  }

Función para detectar el scroll top en el navegador:

 scrollTop() {
    let s = 0;
    if (window.pageYOffset) {
      s = window.pageYOffset;
    }
    else {
      s = document.documentElement.scrollTop;
    }
    return s;
  }

Ahora puedes mediante el evento scroll hacer esto a un elemento

if (e.getBoundingClientRect().top > 0 && ( (scrollTop() + viewport().height) - offset(e).top ) > 0) {

  // Aquí tu código para modificar esos estilos, al ser visible para el usuario el elemento (cuando entre al viewport)

}

Suponiendo que e es ese elemento al que deseas modificar los estilos.

Te adjunto aquí el código de, una librería hecha por mi que tiene todas estas funciones, espero te sirva

NOTA: el método getBoundingClientRect(), que uso al final, es nativo de javascript

2
  • Muchas gracias!! Le echaré el ojo! el 20 abr. 2021 a las 9:20
  • Recibo una alerta de ilegal return statement el 20 abr. 2021 a las 15:45
0

He añadido las lineas que me has comentado Pablo y solamente aumenta el tamaño de las lineas cuando voy al 3er section, a mi me gustaría que en el section 1 se ampliará el primero, en el 2, se encogiera el 1 y ampliara el segundo y así sucesivamente

Tengo ahora mismo esto:

<script>
    document.addEventListener("DOMContentLoaded", function () {
        var fps = new FullPageScroll('wrap', {
            mediaQuery: 'screen and (min-width: 800px)',
            goToTopOnLast: false
        });
        fps.onslide = function (e) {
            console.log("Slide " + (e.target.currentSlide + 1) + " of " + e.target.slides.length);
            document.querySelectorAll("#lineas a").forEach((link, index) => {
                if (index === fps.currentSlide) {
                    //añado estilos para indicar que está activa
                    $("#lineas a").addClass('activo');
                } else {
                    //elimino estilos
                    $("#lineas a").removeClass('activo');
                }
            });
            
        }
        document.querySelectorAll('a.top').forEach(function (el) {
            el.addEventListener('click', function (event) {
                event.preventDefault();
                fps.goToFirstSlide();
            });
        });
    });
</script>

Muchas gracias

1
  • Mueve el contenido de esta "respuesta" a tu pregunta, ya que en realidad es una edición de ella.
    – padaleiana
    el 20 abr. 2021 a las 15:31

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.