Posición CSS fija. envoltorio div debe fijarse verticalmente, pero debe ser que varían en forma horizontal

Question

Tengo un div, algo como esto

#footer 
    { position:fixed; 
     left:40px; 
     top:0px; 
    } 

La posición es fija cuando me desplazarse verticalmente u horizontalmente. Pero quiero que el div se corrija cuando el usuario desplaza la barra de desplazamiento verticalmente, pero debe variar cuando el usuario desplaza la barra de desplazamiento horizontalmente.

He visto algunos de los foros y publicaciones pero sobre todo he encontrado el guión de jquery. ¿Quiero saber si hay una manera de hacerlo en CSS?

Fixed position in only one direction He leído esta publicación pero no entendí el script jquery. Por favor, hágamelo saber la manera de hacerlo en CSS o la mejor manera de hacerlo con jquery.Gracias

Answer 1

Parece imposible hacer que este "se vea bien" con solo CSS/HTML. Como se menciona en Ruup o Fixed position in only one direction, aplicar capas sobre JS es una buena opción.

Afortunadamente, he encontrado una manera de conseguir que funcione de alguna manera (No es hermoso): http://jsfiddle.net/MKEbW/5/

HTML (dentro del cuerpo-tag):

<div id="simulated-html"> 
    <div id="footer"> 
     <span> 
      <!-- Footer text here --> 
     </span> 
    </div> 
    <div id="simulated-body"> 
     <!-- Your website here --> 
    </div> 
</div> 

CSS:

* { margin:0; padding:0; } 

html { 
    font: 12px/1.5em Georgia; 
} 
p { padding: 5px; } 

html, body { 
    height: 100%; 
    overflow: hidden; /* hide scrollbars, we create our own */ 
} 

#simulated-html { 
    background: orange; 
    overflow-x: scroll; /* force horizontal scrollbars (optional) */ 
    overflow-y: hidden; /* hide. we use the #simulated-body for it. */ 
    position: relative; /* to align #footer on #simulated-html */ 
    height: 100%; 
} 

#simulated-body { 
    overflow-y: scroll; /* force vertical scrollbars (optional) */ 
    overflow-x: hidden; /* hide. we use the #simulated-html for it. */ 
    height: 100%; 
    background: #eee; 

    /* use as a container */ 
    width: 450px; 
    margin: 0 auto; 
} 

#footer { 
    position: absolute; 
    bottom: 0px; /* vertical align it to #simulated-html */ 
    width: 100%; 
    background: red; 
    z-index: 99; /* always show footer */ 
    color: white; 
} 
#footer span { 
    width: 450px; 
    margin: 0 auto; 
    background: green; 
    display: block; 
} 

Parece que funciona en IE7 + y navegadores modernos, probados a través de browserlab.adobe.com.

probado con barras de desplazamiento, más pequeño y más amplias ventanas en Chrome 18.

recomiendo una reserva para los navegadores que no son capaces y/o una solución JS.

Answer 2

¿cómo debe variar el eje horizontal? De la forma en que este código es actualmente, permanecería 40px desde la izquierda en todo momento. Para hacer que el margen izquierdo cambie de posición en relación con el tamaño de la ventana, debe usar porcentajes y márgenes negativos. por ejemplo, para centrar un div fijo:

 #centered { 
      height: 350px; 
      top: 0; 
      position: fixed; 
      width: 1024px; 
      left: 50%; 
      margin-left: -512px; 
      z-index: 9999; 
      } 

notificación de que su margen negativo debe ser la mitad del ancho de la div. si lo quieres 40px a la izquierda del centro, deberías agregar otro 40px al margen izquierdo.

Answer 3

La publicación vinculada es exactamente lo que necesita. Puedes copiar el guion exacto.

$(window).scroll(function(){ 
$('#footer').css('left','-'+$(window).scrollLeft()); 
}); 

El css div es así (probablemente no pie de página cuando se tiene la parte superior 0px: P pero no está mal)

#footer 
{ position:fixed; 
    left:40px; 
    top:0px; 
} 

Cuando se desplaza el guión jQuery simplemente ajusta la izquierda (x) coordinar la mismo valor que el scrollLeft de la ventana.

Answer 4

Hay una pequeña corrección en el código anterior.

La cambiado el código Javascript para mover horizontalmente div fijos

$(window).scroll(function(){ 
    $('#footer').css('left',-$(window).scrollLeft()); 
});