Position eines Div - "Fixed" - und Vertikal - "Absolute" - Horizontal innerhalb einer "Position:Relative" Div-Container
Ich bin auf der Suche nach einem Weg kann ich eine div, die werden fest auf der Seite vertikal, so dass, wenn der Benutzer scrollt das div bleibt an der gleichen Stelle auf der Seite. Aber haben es absolut positioniert horizontal, so dass, wenn der Benutzer-Bildschirm ist schmaler als meine Webseite, scrollen nach rechts oder Links wird nicht dazu führen das div verschieben mit dem Bildschirm und, in einigen Fällen bleiben entweder halb sichtbar am Rand des Bildschirms oder von der Seite komplett.
Dieses div muss innerhalb einer "Position:Relative" Div.
Ich bin mir ziemlich sicher, dass es keine Möglichkeit gibt, weisen die verschiedenen Positionen der unterschiedlichen Achse der div aber dies ist der beste Weg, um zu beschreiben, die Wirkung, die ich hoffe zu erreichen.
Habe ich dies bisher, das ist im Grunde nur ein Fixed Div innerhalb von einem Relativen Div.
CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML
<div id="container">
<div id="blue-box"></div>
</div>
Habe ich auch erstellt eine jsFiddle helfen, zeigen das problem.
Dies funktioniert gut für die vertikale, aber wenn Sie die Größe Ihrer web-browser, so dass es schmaler als die gelbe box (container) und dann scrollen Sie horizontal, und die Blaue box bewegen wird, mit der Seite. Ich bin der Hoffnung, zu stoppen, dass aus geschieht.
Wenn es keine Möglichkeit gibt, dies zu erreichen durch CSS, ich bin vollkommen glücklich, JavaScript zu verwenden, solange es funktioniert mit allen modernen Browsern und sowohl IE7 und IE8. (Das ist, warum ich habe das JavaScript-tag)
Kann jemand mir helfen?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Mit JQuery, verwenden Sie die scrollLeft () - Eigenschaft des Dokuments! Dies würde die Arbeit
Siehe auch
http://jsfiddle.net/zhQkq/9/
Glück!
Edit: Wenn Sie es wollen verwenden Sie Ihre voreingestellten margin-left anstatt eine hartcodierte "400", verwenden Sie
Link ein #blue-box-element, um die horizontale Bildlaufleiste eines Fensters mit Vanille javascript wäre so etwas wie dieses:
Wenn es eine Marge ursprünglich definiert in px, vergessen Sie nicht, schneiden Sie die 'px' vom Ende der Zeichenfolge, und klicken Sie dann konvertieren Sie den text in ein int vor, bevor Sie das Fenster.scrollX offset. Setzen Sie dann die 'px' zurück auf das Ende. Funktionen wie
String.replace()
undparseInt()
würde helfen.Hier ist meine Lösung (getestet in Opera und Firefox): http://jsfiddle.net/cCH2Z/2
Der trick ist, geben Sie
right: 0px;
dies wird die position der box 0px vom rechten Rand des Fensters.