Evento Scroll con jQuery

A veces necesitamos realizar un determinado evento cada ves que movemos el scrollbar o las barras de navegación de nuestros Navegador.

Por ejemplo si necesitamos mostrar una alerta, una novedad o un formulario de suscripción, en toda la pantalla para hacérselo saber a un visitante de nuestra Página Web y que luego al bajar con el scrollbar, que esta alerta desaparesca.

escjq

En este tutorial voy a mostrarles una forma de hacer uso de este evento, que de hecho lo deben haber visto en muchas Paginas Webs.

Primero, Hacemos referencia a nuestro archivo jQuery:

src="http://code.jquery.com/jquery-1.9.1.js"

Creamos los estilos para nuestros items:

body{font-family:Arial,Georgia,Serif;}
   body a:link{text-decoration: none;}
   body a:hover{text-decoration: underline;}
	
  .parrafos{float: left; margin-right: 30px; text-align: justify;}
  
  .boletin{
   position: fixed; background-color: #000; padding: 20px; float:right; opacity: 0.9; border; 3px solid #fff; color: #fff; font-family:Arial,Georgia,Serif; 
   top: 40%; left: 50%; margin-top: -100px; margin-left: -100px; border: 5px solid #fff;
   }
   
   .bgbody{background-color: #666; opacity: 0.9;}

Creamos nuestro script jQuery:

$(document).on('ready', function(){

	var posicionActual, posicionNueva = 0;

	$(window).scroll(function(){
	posicionNueva = $(this).scrollTop();

	if(posicionNueva>posicionActual){
	$('.boletin').hide('slow');
	$('body').removeClass('bgbody');
	} 
	posicionActual=posicionNueva;
	});

	})

Finalmente creamos nuestro HTML:


 

Actualiza tu Navegador ( o presiona F5 ) para volver a ver el ejemplo !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper tortor magna, at dignissim neque ultrices vitae. Aliquam at neque orci. Quisque mattis, nisi sit amet ultricies congue, mi sapien aliquam justo, vitae hendrerit tortor ligula et massa. Donec tincidunt nisi ut ante aliquet, vel fringilla lectus tincidunt. Donec sit amet dignissim turpis. In sed sapien lectus. Nam velit diam, sollicitudin vel magna sit amet, eleifend scelerisque lacus.

Etiam vitae turpis venenatis, hendrerit ante ultrices, viverra mauris. Integer euismod sapien odio, in ultricies tellus commodo sed. Pellentesque quis ante et urna sollicitudin auctor. Quisque at dignissim eros. Aenean posuere diam in metus congue facilisis. Ut varius placerat urna, ac sollicitudin lacus dapibus a. Nunc nec blandit nunc. Donec ut erat sit amet urna vestibulum iaculis. Curabitur id orci non tortor varius ullamcorper id et magna.

Fusce at tincidunt diam, vitae porta nibh. Pellentesque aliquam, ipsum at porta auctor, nisi est gravida lectus, eget facilisis libero nulla sed nulla. Fusce auctor quam ac velit scelerisque faucibus. Nulla non quam egestas, imperdiet elit mollis, ultrices eros. Ut eget purus in dui ultricies accumsan. Etiam mollis metus at lorem luctus tempus eu nec mi. Vestibulum auctor odio nec mattis dignissim. Nulla at felis non nunc auctor varius aliquam quis quam. Nulla facilisi. Ut vulputate urna nec massa ultricies tristique. Pellentesque vehicula dignissim libero vitae ultrices. Quisque quis nulla sed metus convallis eleifend. Suspendisse sed tortor vel odio dignissim imperdiet.

Etiam fringilla tempor tortor, rhoncus posuere odio faucibus id. Nulla bibendum massa massa, et faucibus diam facilisis a. Donec sit amet ipsum interdum, laoreet metus id, hendrerit orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae vestibulum massa. Aliquam posuere posuere luctus. Nam venenatis diam vel purus scelerisque lacinia. Nulla lacus augue, pretium non neque et, dapibus tincidunt nibh. Proin at metus et risus auctor rhoncus a sit amet sem. Nullam eleifend ante eget mauris porttitor porta.

Duis ultrices, arcu et varius hendrerit, magna erat pulvinar augue, sit amet convallis nibh leo eu dui. Nam mauris mi, interdum fringilla laoreet quis, imperdiet quis augue. Sed dictum sollicitudin varius. In consequat enim sed metus sodales, ut placerat lorem pretium. Suspendisse ultrices facilisis magna quis blandit. Quisque at vehicula magna. Nulla semper placerat nibh, et accumsan risus interdum sit amet. Cras vitae adipiscing mi. Vestibulum tincidunt vehicula lectus a faucibus. Donec eu dolor non lectus accumsan rhoncus vitae et nisl. Mauris justo ante, varius at massa vitae, placerat scelerisque dolor. Vestibulum augue mi, viverra a ligula vitae, imperdiet placerat orci. Morbi nec egestas tortor.

Baja hacia abajo
y esta ventana
se ocultará !



Suscribete a Nuestro Boletin:





Bueno les dejo una DEMO
Pueden ver el codigo, solo le dan click boton derecho del mouse y luego ver codigo Fuente.

Espero les sirva mucho !

Saludos

Autor: Juan Castro Lurita

Engineer especialista en Web development, también especializado en multimedia, gráfica e impresiones, Blender 3D, Autocad 3D, etc. Actualmente vivo en Lima - Perú. Amo la informática y la Web. Twitter: @pepoflex

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.