Naprawiono pozycję CSS. Div otoki musi być ustalona w pionie, ale musi być w różnym poziomo

Question

Mam div, coś w tym

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

pozycja jest ustalona, ​​kiedy przewijanie w pionie lub poziomie. Ale chcę, aby element div został naprawiony, gdy użytkownik przewija pasek przewijania w pionie, ale powinien zmieniać się, gdy użytkownik przewija pasek przewijania w poziomie.

Widziałem niektóre z forów i postów, ale przede wszystkim znalazłem skrypt jquery. Chcę wiedzieć, czy jest sposób, aby to zrobić w CSS?

Fixed position in only one direction Przeczytałem ten wpis, ale nie rozumiałem skryptu jquery. Uprzejmie daj mi znać sposób to zrobić w css lub lepszy sposób to zrobić z jquery. Thanks

Answer 1

Wydaje się niemożliwe, aby uzyskać "wyglądać dobrze" tylko z CSS/HTML. Jak wspomniano wcześniej od Ruup lub Fixed position in only one direction, dobrym wyborem jest nakładanie warstw na JS.

szczęście znalazłem sposób, żeby to działało jakoś (nie że piękny): http://jsfiddle.net/MKEbW/5/

HTML (wewnątrz ciała-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; 
} 

Wydaje się działać w IE7 + i nowoczesnych przeglądarkach, przetestowanych przez browserlab.adobe.com.

Testowane z pasków przewijania, mniejszych i większych rzutni w Chrome 18.

polecam awaryjne dla przeglądarek nie zdolnych i/lub obejście JS.

Answer 2

Jak powinna się różnić oś pozioma? sposób w jaki ten kod jest obecnie pozostanie 40px od lewej przez cały czas. w celu zmiany lewego marginesu w stosunku do wielkości okna należy użyć procentów i marginesów ujemnych. na przykład, aby wyśrodkować stały element div:

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

Zauważ, że Twój ujemny margines musi być PÓŁDŁUŻ długości twojego div. jeśli chcesz 40px na lewo od centrum, dodajesz kolejne 40px do lewego marginesu.

Answer 3

Połączony wpis jest dokładnie tym, czego potrzebujesz. Możesz skopiować dokładny skrypt.

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

div css jest tak (prawdopodobnie nie stopkę gdy ma górną 0px: P ale ok)

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

Podczas przewijania skrypt jquery tylko dostosowuje lewo (x) koordynuje do taką samą wartość jak wartość przewijania okna.

Answer 4

Istnieje niewielka poprawka w poprzednim kodzie.

Zmieniony kod JavaScript do ruchu stałych div poziomo

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