0

Estoy creando un slide responsive css jquery, este es el ejemplo del slide de página, quiero hacer uno como este: https://www.artfactory.es/es.

No se como hacer para que el primer botón del slide que esta vinculado con el div HOME este active por defecto // resuelto con la clase active

Cómo hacer que el smooth scroll funcione bien ya que con dos links funciona bien pero si pongo un tercero o cuarto estos dos últimos no van bien, ¿cómo lo puedo solucionar?

Adjunto el código html y jquery

    <div id="fullpage">
     <div id="nav">

       <!-- menu -->
       <div class="menu">
         MENU
       </div>
       <!-- fin del menu -->

     </div>
     <!-- fin del nav -->

     <!-- nav_right -->
     <div class="nav_right">
      <ul>
        <li><a href="#home"><span class="active"></span></a></li>
        <li><a href="#nosotros"><span></span></a></li>
        <li><a href="#trabajos"><span></span></a></li>
        <li><a href="#trabajos2"><span></span></a></li>
      </ul>
     </div>
     <!-- fin del nav_right -->

     <!-- HOME -->
     <div id="home">HOME

       <div class="mouse"></div>
     </div>
     <!-- fin del HOME -->
     <div id="nosotros">NOSOTROS

       <div class="mouse"></div>
     </div>
     <!-- fin del NOSOTROS -->
     <div id="trabajos">TRABAJOS

       <div class="mouse"></div>
     </div>
     <!-- fin del NOSOTROS -->
     <div id="trabajos2">MUNCA

       <div class="mouse"></div>
     </div>
     <!-- fin del NOSOTROS -->


   </div>
   <!-- fin del fullpage -->

Este es JS

$('a[href^="#"]').click(function(event){
      //Aquí elimina el evento normal de la etiqueta <a>
      event.preventDefault();
      //Aquí cojemos el elmento
      var elem=$(this).attr("href");
      $("html, body").animate({
        scrollTop: $(elem).offset().top
      },800);
    });
  });

1 respuesta 1

0

Solo tienes que añadir la clase "active" al botón inicial de esta forma la funcion javascript ya detecta este como activo dado que es lo unico que haces, añadir/quitar la clase "active", añadiendola por defecto en el html ya logras eso.

<li><a class="active" href="#home"><span></span></a></li>

Para lograr la transicion debes de añadir en los divs (Home, Nosotros, Trabajos) la propiedad css transition height para decirle que haga una transicion de altura durante unos segundos en el cambio.

transition: height 2s;

https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1

---- Edito para responder al comentario -----

Para eso tienes que controlar el scrol de la pagina de la siguiente forma sin hacer falta que en el html haya la clase puesta:

window.onload = new function() {

   var scrollTop = window.scrollY;

   var currentDiv = '';

   //Ahora tienes que localizar que posicion del scroll en tu pagina tiene caada div
   if (scrollTop >= 0 && scrollTop <=100) {
     currentDiv = 'home';
   } else if (scrollTop >= 101 && scrollTop <=200) {
   //...
   //...
   }

   // y luego con otro sencillo codigo le pones la classe active a uno u otro
   $('idLiHome').addClass(currentDiv == 'Home' ? "active" : "");
   $('idLiNosotros').addClass(currentDiv == 'Nosotros' ? "active" : "");
   //...
   //...

}
5
  • si con la classe active si funciona pero si estoy en nosotros y le doy a refrescar la pagina, el div se queda en nosotros pero el slide se va arriba en la del home como puedo solucionarlo? Commented el 26 nov. 2019 a las 8:22
  • te he añadido un ejemplo de lo que me comentas
    – Arngue
    Commented el 26 nov. 2019 a las 11:01
  • pues cada div esta al 100% de alto lo que tendre que hacer es crear un if else para daca div y aumentar con 100 en cada div? si entendi bien, no controlo mucho el jquery y javascript Commented el 26 nov. 2019 a las 11:14
  • Ocupe lo que ocupe tu div tiene una posicion scrolltop, la cual se la estas indicando en la funcion jquery de la pregunta, entonces tienes que usar la consola de F12 para poner window.scrolltop y saber a que altura tienes cada div
    – Arngue
    Commented el 26 nov. 2019 a las 15:34
  • vale solucione el problema con css, añadi a los div home nosotro .... position absolute y el top 0 al primero 100% al segundo y asi aumentando en 100% en cada div Commented el 27 nov. 2019 a las 7:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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