Patrones de diseño responsivo

Clase 24 de 32 • Curso de Responsive Design 2015

Clase anteriorSiguiente clase

Fabio Rojas

student•

a mi me funciono el efecto del scroll con jquery asi:
$( window ).scroll(function(){
console.log(window.scrollY)

});

Jaime Diaz

student•

saludos @hackchan77 , sabes de que manera se hace sin usar JQUERY? capturar el evento 'scroll' ; lo he intentado capturar con:

headerElem.addEventListener('scrollY', onScroll);  
headerElem.addEventListener('scroll', onScroll);

a pesar de no salir errores en consola, no se captura el evento y por tanto no se ejecuta la función onScroll...

William Reaño Reyes

student•

window.addEventListener(‘scroll’,scrollMenu);

function scrollMenu(){
if(window.scrollY == 0){
console.log(“entro”);
header.classList.add(‘header–light’);
}else{
header.classList.remove(‘header–light’);
}
}

asi seria sin jquery

Edgardo T

student•

El efecto de :hover que da es muy interesante y de hecho muy util para la UX, pero a estar en un diseño mobile, no es tan util, se debe jugar un poco con la interacción del "tap" que hara el usuario.
Podria ser colocar un evento "onClic" de esta manera el usuario al hacer TAP sobre la sección, dala impresión que se ha presionado el boton. La pagina reconocerá el TAP como el Clic.

José María Carro López

student•

a mí me funcionó con vanilla javascript así:

window.onscroll= function(){ if(document.body.scrollTop>162){
header.className='header header--light';
console.log('pasé');
}else{
header.className='header';
}
}

José María Carro López

student•

claro, el console.log('pasé'); sólo era para probar su funcionamiento

Mario Ruano Fernández

student•

Saludos, comunidad Platzi!

Comparto mi solución al problema del cambio de color para el navbar al momento de superar cierto punto del scrollY.

(function () {
	document.addEventListener("DOMContentLoaded", onDOMLoad); // Escuchador del evento de carga del DOM
	
	function onDOMLoad() {
		var headerElem = document.querySelector("header");
		
		window.addEventListener("scroll", onScroll); // Escuchador del evento de scroll de window

		function onScroll() {
			if (window.scrollY >= 152) {
				headerElem.classList.add("header--light");
			} else {
				headerElem.classList.remove("header--light");
			}
		}
	}
}())

No estoy seguro si se trata de la mejor ejecución para dar solución al problema, pero al menos me ha funcionado.

Espero que os sea de ayuda! 😉

Patrones de diseño responsivo

Bienvenidos

Nuevas clases de Responsive Design: ¿Dónde quedo el curso anterior?

¿Dónde encuentro los archivos del curso?

Introducción a responsive design

Preguntas antes de la clase

¿Qué es Responsive Design?

Concepto de Viewport

Patrones de Diseño Responsive: Tiny Tweaks

Progressive Enhancement vs Graceful Degradation

Column Drop

Mostly Fluid

Layout Shifter

Off-Canvas

Preguntas y respuestas después de clase

Diseñando en Mobile First

Preguntas antes de la clase

Entorno de desarrollo

Automatización de tareas con Gulp.js

Index.html del proyecto

Normalize.css

Menu Navbar responsive parte I

Menu Navbar responsive parte II

Videos reponsive

Preguntas y respuesta de la clase

Conceptos avanzados de responsive design

Preguntas antes de clase

Video responsive

Patrones de diseño responsivo

Imagenes responsive

Fuentes de iconos

Usando Browserify para JavaScript

Optimizando para produccion

Preguntas y respuestas en clase

Contenido complementario

Tablas-Responsive

Lazy Loading De Imagenes

¿Cómo hacer Remote Debuggin?