Tema: cambiar css segun posicion de scroll
Ver Mensaje Individual
  #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: 12 años
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