Foros del Web » Programando para Internet » Javascript »

corregir comportamiento de divs

Estas en el tema de corregir comportamiento de divs en el foro de Javascript en Foros del Web. Estimados. necesito su ayuda para corregir el comporamiento de unos divs son 4 divs uno debajo del otro. que a medida que scrolleamos hacia abajo ...
  #1 (permalink)  
Antiguo 01/02/2013, 13:05
Avatar de dieguicho  
Fecha de Ingreso: noviembre-2001
Ubicación: Buenos Aires
Mensajes: 1.190
Antigüedad: 21 años
Puntos: 1
corregir comportamiento de divs

Estimados. necesito su ayuda para corregir el comporamiento de unos divs

son 4 divs uno debajo del otro. que a medida que scrolleamos hacia abajo van sobreponiendose. y a la vez el div que esta siendo superpuesto se queda fijo en el top

esta funcionando ok (hacia abajo) pero ahora necesitaria replicar el funcionamiento cuando scrolleamos hacia arriba. osea. ir descubriendo los divs nuevamente

este fiddle tiene el codigo http://jsfiddle.net/rtSKj/

que opinan? muchas graicas!!
__________________
On error no hago nada porque deje de fumar...
  #2 (permalink)  
Antiguo 01/02/2013, 15:43
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 12 años, 7 meses
Puntos: 154
Respuesta: corregir comportamiento de divs

Haber mi amigo acá me funciona perfecto...lo que hice fue modiicar el javascript y css, asigne los position dinamicamente por JS

...mira como me queda http://jsfiddle.net/2V6jB/


Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     $(window).scroll(function () {
  3.        
  4.         var scrollY = $(window).scrollTop();
  5.  
  6.                 if(scrollY >= 0 && scrollY < 500){
  7.             $('#block1').css({'position': 'fixed', 'margin-top': '0'});
  8.                         $('#block2').css({'position': 'relative', 'margin-top': '500px'});
  9.         }
  10.  
  11.        
  12.         if(scrollY >= 500 && scrollY < 1000){
  13.             $('#block2').css({'position': 'fixed', 'margin-top': 0});
  14.             $('#block3').css({'position': 'relative', 'margin-top': '1000px'});
  15.         }
  16.        
  17.         if(scrollY >= 1000 && scrollY < 1500){
  18.             $('#block3').css({'position': 'fixed', 'margin-top': 0});
  19.             $('#block4').css({'position': 'relative', 'margin-top': '1500px'});
  20.         }
  21.        
  22.     });
  23.    
  24. });

Código CSS:
Ver original
  1. html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  2.   margin:0;
  3.   padding:0;
  4.   border:0;
  5.   outline:0;
  6.   font-size:100%;
  7.   background:transparent;
  8. }
  9.  
  10. body {
  11.     font-family: 'Open Sans','Lucida Grande';
  12.     font-size: 16px;
  13.     -webkit-font-smoothing: antialiased;
  14.     line-height: 1.4;
  15. }
  16.  
  17. .container {
  18.     background-color: #EEE;
  19. }
  20.  
  21. .container > div {
  22.     width:100%;
  23.     min-height: 500px;
  24.     color: #444;
  25.     font-size: 28px;
  26.     text-align: center;
  27.     top: 0;
  28. }
  29.  
  30. #block1 {
  31.     background-color: #6ebcd0;
  32.     z-index: 1;
  33. }
  34.  
  35. #block2 {
  36.     background-color: #55b18e;
  37.     z-index: 2;
  38. }
  39.  
  40. #block3 {
  41.     background-color: #e65748;
  42.     z-index: 3;
  43. }
  44.  
  45. #block4 {
  46.     background-color: #CCC;
  47.     /*#e8e8e8*/
  48.     z-index: 4;
  49. }

Etiquetas: comportamiento, corregir, divs, funcion, js
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:57.