How does this slider made in pure Javascript work?

Question

How does this slider made in pure Javascript work?

Navigation

#1 by (1 votes)

1

What I want to do is a fixed menu. When I click on the menu the slider is activated. But I do not understand this code:

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);
	}
}

javascript css slider scroll

asked by TOMAS 05.09.2017 в 06:23

source

1 answer

Jquery DataTable display PDF in a row Do a where in FireBase with Ionic 3

score 1 · Answer 1

With this code you already have a fixed menu that shows the slider with a transition CSS , with this code you are clicking on an element DOM with id 'page' , when you click collect the elements <section> of that same id and you use them to calculate the distance between the element <section> and the upper part of the window, with that you apply the calculated transition to the element 'page' and after a timeout you return the transition to its initial state

I leave you the commented code

   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);
        }
     }

Since you asked me in a comment I leave the link to JSFiddle here with the example working link