Foros del Web » Programando para Internet » Javascript »

cambiar css segun posicion de scroll

 Estas en el tema de cambiar css segun posicion de scroll en el foro de Javascript en Foros del Web. hola gente que tal? tengo curiosidad y ganas de aprender, quiero hacer algo como esta web: http://es.bab.la/diccionario/espanol-aleman/ que cuando bajas en la pagina aparece un ...
  #1 (permalink)  
Antiguo 26/09/2012, 19:26
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
cambiar css segun posicion de scroll
hola gente que tal? tengo curiosidad y ganas de aprender, quiero hacer algo como esta web:
http://es.bab.la/diccionario/espanol-aleman/
que cuando bajas en la pagina aparece un div arriba pero cuando subis del todo cambia de forma.
ahora que lo pienso, facebook tambien tiene eso en el modo biografia.
alguien sabe como se hace? como hago para saber en que parte de la pantalla esta mirando el usuario? existe algun plugin para jquery o algo asi?

no pongo codigo porque no es para un proyecto, es para aprender yo de curioso XD
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios
  #2 (permalink)  
Antiguo 26/09/2012, 22:48
Avatar de Artificium  
Fecha de Ingreso: enero-2011
Mensajes: 492
Antigüedad: 13 años, 3 meses
Puntos: 81
Respuesta: cambiar css segun posicion de scroll
No me parece bien logrado ese efecto en esa página que has mostrado. Bueno, hacerlo no es tan complicado. Primero que nada se debe programar el evento onscroll de document, así:

document.onscroll = function() {

};

En segundo lugar se debe obtener la posición con respecto al eje Y del elemento al que se le quiere poner el scroll, para eso usaremos la función que de la posición absoluta de un elemento, en esta página está la función esa:

http://www.ahristov.com/tutorial/jav...to%2BHTML.html

Ahora, la idea es esta, cuando el scroll sea igual o mayor a la posición con respecto al eje Y del elemento ese, pues se le cambia el estilo, simplemente se la cambia la clase, en esa clase debe indicar que su posición es fixed, y su top es 0, de este modo quedará pegado en la parte superior de la viewport. Si el scroll es menor que la posición esa, pues se le quita la clase o se le da la clase que antes tenía. Todo esto debe estar programador obviamente en el evento onscroll de document. Nada más, no es tan complicado.
  #3 (permalink)  
Antiguo 27/09/2012, 04:50
Avatar de IsaBelM
Colaborador
  
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: cambiar css segun posicion de scroll
basicamente es lo que te han indicado, pero yo prefiero usar la propiedad pageYOffset
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 27/09/2012, 12:20
Avatar de NSD
NSD
Colaborador
  
Fecha de Ingreso: mayo-2012
Ubicación: Somewhere
Mensajes: 1.332
Antigüedad: 11 años, 11 meses
Puntos: 320
Respuesta: cambiar css segun posicion de scroll
muchas gracias por las respuestas ahora que me las dieron les pedire un poco de ayuda tengo este codigo que hise basandome en las paginas que me pasaron y el la propiedad que sugirio isabel.
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2.  <Html Lang="es">
  3.  <Head>
  4.     <Meta Charset="Utf-8"                       />
  5.     <Meta Name="Author" Content="NSDesign"      />
  6.     <Meta Name="Generator" Content="Notepad++"  />
  7.     <Title>MiSitio</Title>
  8.     <Script Type="text/javascript" Src="http://code.jquery.com/jquery-1.8.2.min.js"></Script>
  9.     <Style>
  10.         #Coordenadas:before{
  11.             content: "Info de Coordenadas: ";
  12.             font-weight:bold;
  13.             font-family:arial black;
  14.         }
  15.         #Coordenadas{
  16.             padding:10px;
  17.             width:800px;
  18.             background-image:-webkit-gradient(linear, 0 0%, 0 100%, from(#FFFFFF), to(#CFCFCF));
  19.             border:1px solid #333333;
  20.             border-radius:2px;
  21.             color:#222222;
  22.             box-shadow:#000000 0 1px 12px;
  23.             margin:50px auto;
  24.             width:200px;
  25.             Font-Variant : small-caps;
  26.             Text-Align : center;
  27.             Text-Shadow : 0 1Px 0 #959595;
  28.             font-family:courier new;
  29.         }
  30.         #Contenedor{
  31.             background-image:-webkit-gradient(linear, 0 0%, 0 100%, from(#FFFFFF), to(#CFCFCF));
  32.             border:1px solid #333333;
  33.             border-radius:2px;
  34.             color:#222222;
  35.             box-shadow:#000000 0 1px 12px;
  36.             margin:0 auto;
  37.             width:600px;
  38.             height:400px;
  39.             overflow:auto;
  40.         }
  41.         #Contenido{
  42.             height:800px;
  43.             margin:0 auto;
  44.             width:500px;
  45.             background-color:#ECECEC;
  46.             border:1px solid #333333;
  47.             border-radius:2px;
  48.             color:#222222;
  49.             box-shadow:#333333 0 0 2px;
  50.         }
  51.         .ENormal , .PNormal{
  52.             width:500px;
  53.             margin:0 auto;
  54.             border:1px solid #333333;
  55.             border-radius:2px;
  56.             color:#222222;
  57.             box-shadow:#333333 0 0 2px;
  58.             Position : Relative;
  59.         }
  60.         .ENormal{
  61.             height:150px;
  62.             background-color:#4A8CDE;
  63.         }
  64.         .PNormal{
  65.             height:75px;
  66.             background-color:#424242;
  67.         }
  68.         .EActiva , .PActiva{
  69.             width:599px;
  70.             margin:0;
  71.             border:1px solid #000000;
  72.         }
  73.         .EActiva{
  74.             height:75px;
  75.             background-color:#4A8CDE;
  76.             Position:fixed;
  77.         }
  78.         .PActiva{
  79.             height:35px;
  80.             background-color:#424242;
  81.         }
  82.     </Style>
  83.     <Script Type="text/javascript">
  84.         function PosicionAbsoluta(ELE) {
  85.             ELE = $('#'+ELE);
  86.             var POS = new Array();
  87.             if (!ELE) {
  88.                 POS['X'] = 0;
  89.                 POS['Y'] = 0;
  90.             } else {
  91.                 POS['X'] = ELE.scrollLeft();
  92.                 POS['Y'] = ELE.scrollTop();
  93.             }
  94.             return POS;
  95.         }
  96.  
  97.         function MostrarCoordenadas(ELE,TAR) {
  98.             POS = PosicionAbsoluta(ELE);
  99.             $('#'+TAR).html('Horizontal: ' + POS['X'] + 'Px.<Br />Vertical: ' + POS['Y'] + 'Px.');
  100.         }
  101.         
  102.         function CambiarClase(ELE,CLA,CLN){
  103.             if (ELE.hasClass(CLA)){ 
  104.                 ELE.slideUp('fast', function(){
  105.                 ELE.removeClass(CLA);
  106.                 ELE.addClass(CLN);
  107.                 ELE.slideDown('fast');
  108.                 });
  109.             }
  110.         }
  111.                 
  112.         function AcomodarContenido(ELE,CON,LIY,LIX,CLA,CLN) {
  113.             POS = PosicionAbsoluta(CON);
  114.             ELE = $('#'+ELE);
  115.             CON = $('#'+CON);
  116.             //if(LIY != 'NOT' && LIX != 'NOT'){
  117.             //  if(LIY<0){ LIY = CON.height()+LIY; }
  118.             //  if(LIX<0){ LIX = CON.height()+LIX; }
  119.             //
  120.             //  if (POS['Y']>LIY && POS['X']>LIX){
  121.             //      ELE.removeClass(CLA);
  122.             //      ELE.addClass(CLN);
  123.             //  } else {
  124.             //      ELE.removeClass(CLN);
  125.             //      ELE.addClass(CLA);
  126.             //  }
  127.             //
  128.             //} else {
  129.                 if(LIY != 'NOT'){
  130.                     if(LIY<0){
  131.  
  132.                         LIY = CON.height()+LIY;
  133.                         if (POS['Y']<LIY){
  134.                             CambiarClase(ELE,CLA,CLN);                          
  135.                         } else {
  136.                             CambiarClase(ELE,CLN,CLA);  
  137.                         }
  138.  
  139.                     } else {
  140.  
  141.                         if (POS['Y']>LIY){
  142.                             CambiarClase(ELE,CLA,CLN);                          
  143.                         } else {
  144.                             CambiarClase(ELE,CLN,CLA);  
  145.                         }
  146.                     }
  147.                 }
  148.  
  149.                 if(LIX != 'NOT'){
  150.                     if(LIX<0){
  151.  
  152.                         LIX = CON.height()+LIX;
  153.                         if (POS['Y']<LIX){
  154.                             CambiarClase(ELE,CLA,CLN);                          
  155.                         } else {
  156.                             CambiarClase(ELE,CLN,CLA);  
  157.                         }
  158.  
  159.                     } else {
  160.  
  161.                         if (POS['Y']>LIX){
  162.                             CambiarClase(ELE,CLA,CLN);                          
  163.                         } else {
  164.                             CambiarClase(ELE,CLN,CLA);  
  165.                         }                       
  166.                     }
  167.                 }
  168.             }
  169.         //}
  170.     </Script>
  171.  </Head>
  172.  <Body>
  173.     <Section Id="Contenedor" onScroll="
  174.     MostrarCoordenadas('Contenedor','Coordenadas');
  175.     AcomodarContenido('Encabezado','Contenedor',150,'NOT','ENormal','EActiva');
  176.     AcomodarContenido('Pie','Contenedor',-75,'NOT','PNormal','PActiva');">
  177.         <Header Id="Encabezado" Class="ENormal">
  178.  
  179.         </Header>
  180.         <Article Id="Contenido">
  181.  
  182.         </Article>
  183.         <Footer Id="Pie" Class="PActiva">
  184.  
  185.         </Footer>
  186.     </Section>
  187.     <Br />
  188.     <Article id="Coordenadas">
  189.         Horizontal: 0Px.
  190.         <Br />
  191.         Vertical: 0Px.
  192.     </Article>
  193.  </Body>
  194.  </Html>

con el encabezado anda bien pero tengo problemas con el pie. la idea mia es hacer una funcion medio generica que sirva para esto. podrian probarlo y ver que estoy haciendo mal o que le falta?
la parte comentada esta en desarrollo todabia no le den bolilla.
con que ande en los navegadores con webkit (crome safari etc alcanzaria no tengo interes en que ande en el ie2 )
__________________
Maratón de desafíos PHP Junio - Agosto 2015 en FDW | Reglamento - Desafios

Etiquetas: css, posicion, scroll
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


« Tema Anterior | Próximo Tema »


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