1

Lo que quiero hacer es un menu fixed. Cuando clickeo en el menu se active el slider. Pero no entiendo este codigo:

function funcion(){
	var page = document.getElementById('page');
	var sections = page.getElementsByTagName('section'); 
	// This transition can be defined in the CSS if preferred.
	var transition = 'top .8s cubic-bezier(0.77, 0, 0.175, 1)';
	page.style.transition = transition;
	page.onclick = slideDown;
	//document.getElementsByClassName("")

	function slideDown(e) {  
		// Delegate.
		if (e.target.className != 'next') {
			return;
		}

		// Prevent firing simultaneously.
		page.onclick = '';  
		self = e.target.parentNode; // Devuelve el elemento <section>.
		var offset = self.getBoundingClientRect(); // Devuelve tamñano y posicion relativa a la ventana.
		var scroll = self.offsetTop; // La distancia desde la parte superior de <section> con su padre (<div id=page>).

		// CSS Transition slide.
		page.style.top = (-offset.height-offset.top) + 'px'; // La altura del elemento (-offset) menos la parte mas alta de la pagina.

		setTimeout(function () {
			// Reposition the real scrollbar.
			page.style.transition = 'none';
			page.style.top = '';
			window.scrollTo(0, offset.height+scroll);
			page.style.transition = transition;
			// Reattach event.
			page.onclick = slideDown;
			// This timeout length should match the CSS animation time (.8s).
		}, 800);
	}
}

1 respuesta 1

1

Con este código ya tienes un menú fixed que muestra el slider con una transición CSS, con este código estás haciendo clic sobre un elemento DOM con id 'page', al hacer clic recojes los elementos <section> de ese mismo id y los usas para calcular la distáncia que hay entre el elemento <section> y la parte superior de la ventana, con eso aplicas la transición calculada al elemento 'page' y tras un timeout vuelves la transición a su estado inicial

Te dejo el código comentado

   function funcion(){
        // Recuperamos el elemento con id 'page'
        var page = document.getElementById('page');
        // Recuperamos todas las etiquetas <section> dentro del elemento 'page'
        var sections = page.getElementsByTagName('section');

        // Definimos la transicion css a aplicar al elemento id 'page'
        var transition = 'top .8s cubic-bezier(0.77, 0, 0.175, 1)';
        // Aplicamos la transicion como un estilo css
        page.style.transition = transition;
        // Al clicar en el elemento 'page' hacemos la funcion slideDown
        page.onclick = slideDown;

        function slideDown(e) {  
            // Si estamos haciendo click sobre un elemento DOM con clase 'next',
            // no hacemos nada de la funcion slideDown
            if (e.target.className != 'next') {
                return;
            }
            // Prevenimos el doble click
            page.onclick = ''; 
            // Recuperamos el elemento DOM Padre inmediato del elemento que hemos hecho click *(event.target)*
            self = e.target.parentNode; 
            // Cogemos el elemento <section> dentro del padre recuperado.
            var offset = self.getBoundingClientRect(); 
            // Recojemos tamñano y posicion relativa a la ventana,
            // de la distancia desde la parte superior de <section> con su padre (<div id=page>).
            var scroll = self.offsetTop; 

            // Aplicamos la transicion CSS calculando
            // La altura del elemento <section> menos la parte mas alta de la pagina.
            page.style.top = (-offset.height-offset.top) + 'px'; 

            // Con un timeout volvemos la transicion a su estado inicial
            setTimeout(function () {
                // Reposicionar la barra de scroll.
                page.style.transition = 'none';
                page.style.top = '';
                window.scrollTo(0, offset.height+scroll);
                // Reasignamos la transicion inicial
                page.style.transition = transition;
                // Reasignamos el evento onclick.
                page.onclick = slideDown;
                // Este timeout debería de durar parecido a la transicion (8s).
            }, 800);
        }
     }

Ya que me lo pediste en un comentario dejo el enlace al JSFiddle aqui con el ejemplo funcionando https://jsfiddle.net/w0usmrbj/1/

12
  • No entiendo la parte de "recuperamos las secciones del elemento page"..
    – TOMAS
    Commented el 8 sept. 2017 a las 6:57
  • Perdón, he cambiado la frase entera, espero que ahora la entiendas mejor
    – Arngue
    Commented el 11 sept. 2017 a las 15:22
  • de todas formas, y aprovechando el post, ¿porque se declaran funciones dentro de functiones?
    – GDP
    Commented el 11 sept. 2017 a las 15:28
  • Tengo un problema cuando selecciono un section con offset = document.getElementsByTagName("section")[0].getBoundingClientRect(); a este section lo reconoce como primero cuando en realidad es el segundo.
    – TOMAS
    Commented el 11 sept. 2017 a las 17:29
  • 1
    @GDP esto la forma de programar javascript lo permite y el ejemplo mas claro es en el que asignas esta funcion function() al onload de una pagina <script>window.onload = function;</script> donde te interesa que esa funcion se carge en el onload de la pagina
    – Arngue
    Commented el 12 sept. 2017 a las 6:35

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.