Die Position eines Div auf der Webseite fixieren

Question

Ich habe ein Div, dessen Position festgelegt wurde. Alles ist in Ordnung, bis das Fenster verkleinert ist. Wenn Sie bei der Größenänderung zum rechten Teil der Webseite blättern, bleibt das feste Div am linken Ende des Bildschirms. Ich möchte, dass es mit dem Fenster nach links scrollt, aber nicht mit dem Fenster nach unten scrollt.

Wenn ich unklar bin, meine Zweifel auszudrücken. Sie können eine live demo here haben.

Suche nach einem Produkt sagen Apple Ipod Touch dort. Sobald die Ergebnisse angezeigt werden, ändern Sie das Fenster und scrollen Sie nach rechts.

Kann jemand einige CSS oder Javascript vorschlagen, um das gleiche zu lösen.

Danke!

Answer 1

Ich würde Ihr Layout umstrukturieren und die Position korrigieren. Zum Beispiel so etwas. Offensichtlich ist das nicht genau wie dein Code. Aber das Konzept ist das gleiche. Wenn Sie Ihr div mit dem Steuerelement innerhalb des gleichen Containers wie die Ergebnisse und den Verlauf haben, sollte es sich dann mit ihm bewegen.

#wrapper { 
width:960px; 
margin:0 auto 0 auto; 
} 

#left-col, 
#right-col { 
width:100px; 
float:left; 
} 

#mid-col { 
width:710px; 
float:left; 
} 

<!-- holds your column containers --> 
<div id="wrapper"> 

<!-- your control --> 
<div id="left-col"> 
</div> 

<!-- your search results --> 
<div id="mid-col"> 
</div> 

<!-- your history --> 
<div id="right-col"> 
</div> 

</div> 

Answer 2

Verwenden Sie entweder CSS Media Queries oder Javascript. Ein schneller Weg ist auf Jquery $(window).resize Methode.

Answer 3

Ich denke, man muss nur

position: fixed von #completeSlider

zumindest entfernen, die für mich auf Chrom gearbeitet.

EDIT:

dann würde ich sagen, dass Sie JQuery verwenden, um dies zu handhaben. Sie können nicht sowohl eine feste Positionierung als auch relativ zu anderen Elementen haben. Noch entfernen position: fixed wie oben erwähnt und einige JQuery Magie hinzufügen wie folgt:

$(window).scroll(function() { 

$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0}); 

}); 

scheint, wie die Standard-$ für jQuery für eine andere Funktion auf Ihrer Seite reserviert ... versuchen Sie dies:

jQuery(window).scroll(function() { 

    jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0}); 

});