Feste Position, aber relativ zum Container

639

Ich versuche, ein Problem zu beheben, divdamit es immer am oberen Bildschirmrand haftet.

position: fixed;
top: 0px;
right: 0px;

Das divbefindet sich jedoch in einem zentrierten Behälter. Wenn ich es benutze position:fixed, wird das divVerhältnis zum Browserfenster korrigiert, z. B. auf der rechten Seite des Browsers. Stattdessen sollte es relativ zum Container festgelegt werden.

Ich weiß, dass position:absolutedies verwendet werden kann, um ein Element relativ zu dem zu fixieren div, aber wenn Sie die Seite nach unten scrollen, verschwindet das Element und bleibt nicht wie bei oben position:fixed.

Gibt es einen Hack oder eine Problemumgehung, um dies zu erreichen?

Zach Nicodemous
quelle
"Tether ist eine einfache UI-Bibliothek, mit der jedes Element auf einer Seite neben jedem anderen Element positioniert werden kann." github.com/shipshapecode/tether + Demos / Docs bei tether.io
Kai Noack

Antworten:

407

Kurze Antwort: nein. (Es ist jetzt mit CSS-Transformation möglich. Siehe die Bearbeitung unten)

Lange Antwort: Das Problem bei der Verwendung der "festen" Positionierung besteht darin, dass das Element aus dem Fluss genommen wird . Daher kann es nicht relativ zu seinem übergeordneten Element neu positioniert werden, da es so ist, als hätte es keines. Wenn der Container jedoch eine feste, bekannte Breite hat, können Sie Folgendes verwenden:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Bearbeiten (03/2015):

Dies sind veraltete Informationen. Mit Hilfe der Magie der CSS3-Transformation ist es jetzt möglich, Inhalte einer dynamischen Größe (horizontal und vertikal) zu zentrieren. Das gleiche Prinzip gilt, aber anstatt den Rand zum Versetzen Ihres Containers zu verwenden, können Sie ihn verwenden translateX(-50%). Dies funktioniert mit dem obigen Randtrick nicht, da Sie nicht wissen, wie viel er versetzt werden soll, es sei denn, die Breite ist fest und Sie können keine relativen Werte (wie 50%) verwenden, da diese relativ zum übergeordneten Element und nicht zum Element sind, das es ist angewendet. transformverhält sich anders. Seine Werte beziehen sich auf das Element, auf das sie angewendet werden. Somit bedeutet 50%for transformdie Hälfte der Breite des Elements, während 50%for margin die Hälfte der Breite des übergeordneten Elements beträgt. Dies ist eine IE9 + -Lösung

Mit ähnlichem Code wie im obigen Beispiel habe ich dasselbe Szenario mit vollständig dynamischer Breite und Höhe neu erstellt:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

Wenn Sie möchten, dass es zentriert wird, können Sie dies auch tun:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Nur horizontal
zentriert jsFiddle: Sowohl horizontal als auch vertikal zentriert Das
ursprüngliche Guthaben geht an den Benutzer aaronk6 , der mich in dieser Antwort darauf hingewiesen hat

Joseph Marikle
quelle
Hat wunderbar für mich gearbeitet. Obwohl ich meine links von und bereits zentrierte, nicht fixierte Div brauchte, musste ich nur den linken Rand verringern, bis er ausgerichtet war. Keine bleibt ausgerichtet, egal wie breit die Fenster sind. Vielen Dank. +1
Iain M Norman
9
@ Joseph eine Idee, warum position:fixedohne Angabe topoder left manchmal funktioniert? Einige Browser scheinen das Element standardmäßig auf den normalen Stand zu bringen, wenn es normal positioniert wäre. stackoverflow.com/questions/8712047/…
Flash
2
Was ist ohne feste Höhe und Breite? In meinem Fall habe ich keinem Container bis zum Body-Tag eine Signalbreite gegeben. Welche Lösung wirst du mir sagen?
mfq
1
@mfq Leider funktioniert diese Methode ohne bekannte Höhe und Breite überhaupt nicht. Was Sie tun, hängt weitgehend davon ab, was Sie zentrieren möchten. Wenn es sich um ein Bild handelt, verwenden Sie es einfach als Hintergrund für einen 100% x 100% -Container. Wenn es sich um ein tatsächlich dynamisches Element handelt, müssen Sie wahrscheinlich eine Javascript-Lösung verwenden, um die Dimensionen zu ermitteln.
Joseph Marikle
2
Ich habe festgestellt, dass das Hinzufügen left:inheritzum Element mit fester Position den Browser dazu zwingen kann, den Versatz des übergeordneten Elements zu berücksichtigen.
Willster
180

Tatsächlich ist dies möglich und die akzeptierte Antwort befasst sich nur mit der Zentralisierung, was recht einfach ist. Außerdem müssen Sie wirklich kein JavaScript verwenden.

Auf diese Weise können Sie mit jedem Szenario umgehen:

Richten Sie alles so ein, wie Sie es möchten, wenn Sie positionieren möchten: absolut innerhalb eines position: relativen Containers, und erstellen Sie dann eine neue feste Position div innerhalb der div mit position: absolute, aber legen Sie nicht die oberen und linken Eigenschaften fest. Es wird dann relativ zum Container fixiert, wo immer Sie es möchten.

Zum Beispiel:

/* Main site body */
.wrapper {
    width: 940px;
    margin: 0 auto;
    position: relative; /* Ensure absolute positioned child elements are relative to this*/
}

/* Absolute positioned wrapper for the element you want to fix position */
.fixed-wrapper {
    width: 220px;
    position: absolute;
    top: 0;
    left: -240px; /* Move this out to the left of the site body, leaving a 20px gutter */
}

/* The element you want to fix the position of */
.fixed {
    width: 220px;
    position: fixed;
    /* Do not set top / left! */
}
<div class="wrapper">
    <div class="fixed-wrapper">
        <div class="fixed">
            Content in here will be fixed position, but 240px to the left of the site body.
        </div>
    </div>
</div>

Leider hatte ich gehofft, dass dieser Thread mein Problem mit dem WebKit von Android lösen könnte, das Box-Shadow-Unschärfe-Pixel als Ränder für Elemente mit fester Position darstellt, aber es scheint ein Fehler zu sein.
Wie auch immer, ich hoffe das hilft!

Graeme Blackwood
quelle
1
Nicht ganz JEDES Szenario, aber es ist ein guter Anfang. Wenn unter .wrapper viel Platz ist, endet Ihr .fixed-Wrapper am unteren Rand des übergeordneten Elements, aber Ihr .fixed-Element fließt weiterhin aus beiden Containern in den darunter liegenden Inhalt. Wie ich schon sagte, es ist ein guter Anfang, nicht perfekt, aber ich sehe nicht, wie dies ohne ein paar js erreicht werden kann.
o_O
4
Dies spielt jedoch beim flüssigen Design keine gute Rolle.
Zuhaib Ali
3
Ich habe versucht, dies zu tun, aber als ich nach unten scrolle, bewegt sich der Header, den ich fest angewendet habe (mit dem absoluten Elternteil, zu dem das Elternteil relativ war), nicht, während ich scrolle.
Mirage
Dies funktionierte bei mir mit einem oberen rechten Div in Chromium und Firefox, außer dass die vertikalen Positionen des festen Divs unterschiedlich waren (auf Chrom war es über dem übergeordneten Div, auf Firefox war es innen).
Damien
2
Das war die Antwort für mich! Danke @Graeme Blackwood
Tabu.Net
136

Ja, gemäß den Spezifikationen gibt es einen Weg.

Ich stimme zwar zu, dass Graeme Blackwoods die akzeptierte Antwort sein sollte, da es das Problem praktisch löst, es sollte jedoch beachtet werden, dass ein festes Element relativ zu seinem Behälter positioniert werden kann .

Ich habe das zufällig bei der Bewerbung bemerkt

-webkit-transform: translateZ(0);

für den Körper machte es ein festes Kind relativ zu ihm (anstelle des Ansichtsfensters). Meine festen Elemente leftund topEigenschaften waren nun relativ zum Container.

Also habe ich einige Nachforschungen angestellt und festgestellt, dass das Problem bereits von Eric Meyer behandelt wurde, und selbst wenn es sich wie ein "Trick" anfühlte, stellte sich heraus, dass dies Teil der Spezifikationen ist:

Bei Elementen, deren Layout vom CSS-Box-Modell gesteuert wird, führt jeder andere Wert als keiner für die Transformation dazu, dass sowohl ein Stapelkontext als auch ein enthaltender Block erstellt werden. Das Objekt fungiert als enthaltender Block für fest positionierte Nachkommen.

http://www.w3.org/TR/css3-transforms/

Wenn Sie also eine Transformation auf ein übergeordnetes Element anwenden, wird es zum enthaltenden Block.

Aber...

Das Problem ist, dass die Implementierung fehlerhaft / kreativ erscheint, da sich die Elemente auch nicht mehr wie fest verhalten (auch wenn dieses Bit nicht Teil der Spezifikation zu sein scheint).

Das gleiche Verhalten tritt in Safari, Chrome und Firefox auf, jedoch nicht in IE11 (wo das feste Element weiterhin fest bleibt).

Eine andere interessante (undokumentierte) Sache ist, dass, wenn ein festes Element in einem transformierten Element enthalten ist, während seine topund leftEigenschaften nun unter Berücksichtigung der Eigenschaft mit dem Container verknüpft sind box-sizing, sich sein Bildlaufkontext über den Rand des Elements erstreckt, als ob Box -sizing wurde auf gesetzt border-box. Für einige Kreative da draußen könnte dies möglicherweise ein Spielzeug werden :)

PRÜFUNG

Francesco Frapporti
quelle
4
Dies ermöglichte es mir, eine Tabelle mit festen Überschriften in einem Container
Zach Saucier
Schön, das funktioniert bei mir in Chrome. Irgendwelche Ideen, wie man dasselbe im IE erreichen kann? Ich habe versucht, translateZ zu verwenden, aber in keiner IE-Version.
Anish Patel
Gleich .. weiß jemand, wie man das im IE macht? Es ist eine Art Schmerz, den Browser zu erkennen und dann systematisch anzuzeigen oder nicht anzuzeigen left:(wenn man bedenkt, dass es durcheinander kommt)
Tallboy
Ich erfülle nur die entgegengesetzte Bedingung, die im relativen Container behoben, aber durch die Transformationseigenschaft geändert werden muss. Ihre Antwort ist sehr hilfreich, danke!
Mytharcher
8
@Francesco Frapporti scheint, dass dies nicht mehr funktioniert ... in der neuesten Version von Chrome sowieso (Version 42.0.2311.90) :(
jjenzz
60

Die Antwort lautet ja, solange Sie nicht left: 0oder right: 0nachdem Sie die div-Position auf fest gesetzt haben.

http://jsfiddle.net/T2PL5/85/

Kasse der Seitenleiste div. Es ist fest, bezieht sich jedoch auf das übergeordnete Element und nicht auf den Fensteransichtspunkt.

body { background: #ccc; }

.wrapper {
    margin: 0 auto;
    height: 1400px;
    width: 650px;
    background: green;
}

.sidebar {
    background-color: #ddd;
    float: left;
    width: 300px;
    height: 100px;
    position: fixed;
}

.main {
    float: right;
    background-color: yellow;
    width: 300px;
    height: 1400px;
}

<div class="wrapper">wrapper
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
</div>
Shadow_boi
quelle
12
Gibt es einen Grund, warum dies nicht mehr positive Stimmen bekommt? Scheint mir die naheliegendste Lösung zu sein.
Trace
Was ist mit Cross-Browser-Kompatibilität? Hat jemand von euch das überprüft?
Alexandre Bourlier
3
Dies ist korrekt, jedoch nur für die 'Positionierung' des festen Elements. Die Containerbreite wird nicht berücksichtigt oder die Größe wird in keiner Weise geändert. Beispiel: Wenn Sie eine Flüssigkeitsverpackung mit maximaler Breite haben: 1000px; Rand: Auto; das wird nicht funktionieren. Wenn alles eine feste Breite haben kann, dann wird dies Ihr Problem lösen.
Rhys
3
@AlexandreBourlier Ja, das hat für mich zumindest für ein festes Element in Chrome, Firefox und IE11 gut funktioniert.
Jason Frank
Hat perfekt funktioniert. Musste Rand-links hinzufügen: X%, um das Element rechts vom Container zu bringen
Anand
45

position: stickyDas ist eine neue Art, Elemente zu positionieren, die konzeptionell ähnlich sind position: fixed. Der Unterschied besteht darin, dass sich ein Element mit position: stickywie position: relativein seinem übergeordneten Element verhält , bis ein bestimmter Versatzschwellenwert im Ansichtsfenster erreicht wird.

In Chrome 56 (derzeit Beta ab Dezember 2016, stabil im Januar 2017) Position: Sticky ist jetzt zurück.

https://developers.google.com/web/updates/2016/12/position-sticky

Weitere Details finden Sie unter Stick your landings! Position: klebrige Länder in WebKit .

PoseLab
quelle
Dies macht das Leben so viel einfacher. Das einzige Problem ist, dass Sticky in Internet Explorer oder Edge 15 und früheren Versionen nicht unterstützt wird.
Ricks
1
position:stickyist toll. Unterstützt von allen Browsern außer IE caniuse.com/#feat=css-sticky
Yarin
lol, so alte API, und du rettest meinen Tag ... ich benutze es für feste Spalten für Flex-Tabellen.
Vladislav Gritsenko
1
"innerhalb des übergeordneten Elements" - ist es möglich, das klebrige Element oben zu bleiben, auch wenn das überrollte übergeordnete Element unsichtbar wurde?
Fikret
28

2019 LÖSUNG: Sie können position: stickyEigentum verwenden.

Hier ist ein Beispiel für CODEPEN , das die Verwendung und deren Unterschiede demonstriert position: fixed.

Wie es sich verhält, wird unten erklärt:

  1. Ein Element mit einer klebrigen Position wird basierend auf der Bildlaufposition des Benutzers positioniert. Es verhält sich im Grunde so, position: relativebis ein Element über einen bestimmten Versatz hinaus gescrollt wird. In diesem Fall wird es in die Position: fest. Wenn es zurückgescrollt wird, kehrt es zu seiner vorherigen (relativen) Position zurück.

  2. Es beeinflusst den Fluss anderer Elemente auf der Seite, dh es belegt einen bestimmten Platz auf der Seite (genau wie position: relative).

  3. Wenn es in einem Container definiert ist, wird es in Bezug auf diesen Container positioniert. Wenn der Container einen Überlauf hat (Bildlauf), wird er abhängig vom Bildlaufversatz in Position: fest.

Wenn Sie also die festgelegte Funktionalität erreichen möchten, sich jedoch in einem Container befinden, verwenden Sie Sticky.

Pransh Tiwari
quelle
Schöne Lösung. Ich wusste es noch position: stickynicht. Hat mir sehr geholfen, danke!
Dave0688
Ich wollte das gerade posten. Gute Antwort! klebrig ist der Weg.
dkellner
18

Nehmen Sie einfach die oberen und linken Stile aus der festen Position div. Hier ist ein Beispiel

<div id='body' style='height:200%; position: absolute; width: 100%; '>
    <div id='parent' style='display: block; margin: 0px auto; width: 200px;'>
        <div id='content' style='position: fixed;'>content</div>
    </div>
</div> 

Das #content div wird überall dort sitzen, wo das übergeordnete div sitzt, wird dort jedoch festgelegt.

hobberwickey
quelle
3
Warum das Minus? Dies funktioniert perfekt, um ein Element im Fluss des DOM zu fixieren, wo immer Sie wollen. tödlichkitten.com
tests/
18

Ich habe dieses jQuery-Plugin erstellt, um ein ähnliches Problem zu lösen, bei dem ich einen zentrierten Container (Tabellendaten) hatte, und ich wollte, dass der Header beim Scrollen der Liste am oberen Rand der Seite fixiert wird, aber ich wollte, dass er verankert wird die tabellarischen Daten so, dass sie sich überall dort befinden, wo ich den Container platziere (zentriert, links, rechts) und ihn beim horizontalen Scrollen mit der Seite nach links und rechts bewegen kann.

Hier ist der Link zu diesem jQuery-Plugin, der dieses Problem lösen kann:

https://github.com/bigspotteddog/ScrollToFixed

Die Beschreibung dieses Plugins lautet wie folgt:

Dieses Plugin wird verwendet, um Elemente am oberen Rand der Seite zu fixieren, wenn das Element vertikal aus der Ansicht gescrollt worden wäre. Das Element kann sich jedoch mit dem horizontalen Bildlauf weiter nach links oder rechts bewegen.

Bei einer Option marginTop bewegt sich das Element nicht mehr vertikal nach oben, sobald der vertikale Bildlauf die Zielposition erreicht hat. Das Element bewegt sich jedoch weiterhin horizontal, wenn die Seite nach links oder rechts gescrollt wird. Sobald die Seite nach unten gescrollt wurde und die Zielposition überschritten wurde, wird das Element an seiner ursprünglichen Position auf der Seite wiederhergestellt.

Dieses Plugin wurde in Firefox 3/4, Google Chrome 10/11, Safari 5 und Internet Explorer 8/9 getestet.

Verwendung für Ihren speziellen Fall:

<script src="scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery-scrolltofixed-min.js" type="text/javascript"></script>

$(document).ready(function() {
    $('#mydiv').scrollToFixed();
});
bigspotteddog
quelle
12

Ich musste dies mit einer Werbung tun, die mein Kunde außerhalb des Inhaltsbereichs platzieren wollte. Ich habe einfach folgendes gemacht und es hat wie ein Zauber funktioniert!

<div id="content" style="position:relative; width:750px; margin:0 auto;">
  <div id="leftOutsideAd" style="position:absolute; top:0; left:-150px;">
    <a href="#" style="position:fixed;"><img src="###" /></a>
  </div>
</div>
Eric K.
quelle
Meine Anzeige war 140 Pixel breit, daher habe ich sie um 150 Pixel nach links verschoben, um ein wenig rechten Rand am Rand des Website-Rahmens zu erhalten.
Eric K
7

Zwei HTML-Elemente und reines CSS (moderne Browser)

Siehe dieses jsFiddle-Beispiel. Ändern Sie die Größe und sehen Sie, wie sich die festen Elemente sogar mit den schwebenden Elementen bewegen, in denen sie sich befinden. Verwenden Sie die innerste Bildlaufleiste, um zu sehen, wie der Bildlauf auf einer Site funktionieren würde (feste Elemente bleiben fest).

Wie hier schon viele gesagt haben, ist ein Schlüssel keine Positionseinstellungen auf dem nicht einstellen fixedElement (nicht top, right, bottom, oder leftWerte).

Vielmehr setzen wir alle festen Elemente (beachten Sie, wie die letzte Box vier davon hat) zuerst in die Box, von der sie positioniert werden sollen, wie folgt:

<div class="reference">
  <div class="fixed">Test</div>
  Some other content in.
</div>

Dann verwenden margin-topund margin-left"verschieben" wir sie in Bezug auf ihren Container, so wie es dieses CSS tut:

.fixed {
    position: fixed;
    margin-top: 200px; /* Push/pull it up/down */
    margin-left: 200px; /* Push/pull it right/left */
}

Da fixedElemente alle anderen Layoutelemente ignorieren, kann der letzte Container in unserer Geige mehrere fixedElemente enthalten und dennoch alle Elemente, die sich auf die obere linke Ecke beziehen. Dies gilt jedoch nur, wenn sie alle zuerst im Container platziert werden, da diese Vergleichsgeige zeigt, dass die Positionierung unzuverlässig wird, wenn sie im Containerinhalt verteilt wird .

Es spielt keine Rolle, ob der Wrapper statisch , relativ oder absolut positioniert ist.

ScottS
quelle
3

Sie können mein jQuery-Plugin FixTo ausprobieren .

Verwendungszweck:

$('#mydiv').fixTo('#centeredContainer');
Burak
quelle
2

Eine andere seltsame Lösung, um eine relative feste Position zu erreichen, besteht darin, Ihren Container in einen Iframe umzuwandeln. Auf diese Weise kann Ihr festes Element im Ansichtsfenster des Containers und nicht auf der gesamten Seite fixiert werden.

Beto Aveiga
quelle
2

Mit reinem CSS können Sie das nicht schaffen. Zumindest habe ich nicht. Sie können dies jedoch sehr einfach mit jQuery tun. Ich werde mein Problem erklären und mit einer kleinen Änderung können Sie es verwenden.

Zunächst wollte ich, dass mein Element einen festen oberen Rand (vom oberen Rand des Fensters) und eine linke Komponente hat, die vom übergeordneten Element geerbt werden soll (da das übergeordnete Element zentriert ist). Um die linke Komponente festzulegen, fügen Sie einfach Ihr Element in das übergeordnete Element ein und legen Sie es position:relativefür das übergeordnete Element fest.

Dann müssen Sie wissen, wie weit Ihr Element von oben entfernt ist, wenn sich eine Bildlaufleiste oben befindet (y Null gescrollt). Es gibt wieder zwei Möglichkeiten. Erstens ist das statisch (eine Zahl) oder Sie müssen es aus dem übergeordneten Element lesen.

In meinem Fall sind es 150 Pixel von oben statisch. Wenn Sie also 150 sehen, ist es, wie viel das Element von oben ist, wenn wir nicht gescrollt haben.

CSS

#parent-element{position:relative;}
#promo{position:absolute;}

jQuery

$(document).ready(function() { //This check window scroll bar location on start
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');

});
$(window).scroll(function () { //This is when the window is scrolling
    wtop=parseInt($(window).scrollTop());
    $("#promo").css('top',150+wtop+'px');
});
Herr Br
quelle
Das Problem ist, dass das betreffende Div beim Scrollen flackert.
Vvohra87
Wahrscheinlich, weil das Scrollen zu stark oder zu schnell aktualisiert wird. Ich hatte dieses Problem zwar nicht, aber ich kann vorschlagen, dass Sie versuchen, einen globalen "Blocker" zu verwenden, der beispielsweise alle 10 ms oder einige Zeit aktualisiert wird und bei jeder Höhenänderung auf den Blockierungswert gesetzt wird. Natürlich müssen Sie dem .scroll-Ereignis eine if-Bedingung hinzufügen, die überprüft, ob Sie in diesem Zeitraum (10 ms) bereits div gescrollt haben. Ich wiederhole, ich habe es nicht versucht, aber ich glaube, es könnte funktionieren :) Auf diese Weise könnten Sie verhindern, dass div seine Position zu stark ändert, so dass der Computer nicht wirklich folgen kann, und genug, damit das menschliche Auge es sieht.
Herr Br
Ich habe deine Antwort bereits gegeben +1 Kumpel;) Der Schmerz beim Anhängen einer globalen Schleifenmethode ist wirklich Leistung. Es ist schmerzhaft, so etwas in älteren PCs und Tablets gut zum Laufen zu bringen. Oft hat ein Junior-Entwickler bei der Arbeit ein 'var x' in eine solche Methode geschrieben, was zu unnötigen Speicherverlusten führt, wenn die Seite zu lange offen bleibt: P Aber ja, Ihr Vorschlag scheint die einzig richtige Option zu sein.
Vvohra87
Sie haben Punkt mit globalen Schleifen; ist nicht gut, ich stimme zu. Ich denke nur gerne über diese Art von Problemen nach, deshalb habe ich einen weiteren Vorschlag geschrieben :) Tbh, jetzt, wo es etwas besser aussieht, würde ich es vermeiden. XD Ich habe jetzt eine andere Lösung. Was Sie über das Setzen von setTimeout () für ein Bildlaufereignis sagen, das func aufruft. Das macht Div-Bewegung. Außerdem verwenden Sie einen globalen Blocker, der auf true gesetzt ist, während Sie auf das Timeout warten. Wenn das Timeout aufgerufen wird, setzen Sie den Blocker auf false zurück, wodurch nach einiger Zeit ein weiterer Aufruf möglich wird. Auf diese Weise würden Sie keine globale Schleife verwenden Sie haben jedoch weiterhin die Kontrolle über die Frequenz der Div-Bewegung.
Herr Br
Es ist eleganter, aber ich finde es schwer zu akzeptieren. Ich erwarte, dass die HTML- und CSS-Spezifikationen TBH verarbeiten. Hasse die Tatsache, dass js an erster Stelle beteiligt ist!
vvohra87
1

Dies ist einfach (gemäß HTML unten)

Der Trick besteht darin, NICHT oben oder links auf dem Element (div) mit "position: fixed;" zu verwenden. Wenn diese nicht angegeben sind, erscheint das Element "fester Inhalt" RELATIV zum umschließenden Element (das div mit "position: relative;") STATT relativ zum Browserfenster !!!

<div id="divTermsOfUse" style="width:870px; z-index: 20; overflow:auto;">
    <div id="divCloser" style="position:relative; left: 852px;">
        <div style="position:fixed; z-index:22;">
            <a href="javascript:hideDiv('divTermsOfUse');">
                <span style="font-size:18pt; font-weight:bold;">X</span>
            </a>
        </div>
    </div>
    <div>  <!-- container for... -->
         lots of Text To Be Scrolled vertically...
         bhah! blah! blah!
    </div>
</div>

Oben konnte ich eine schließende "X" -Schaltfläche am oberen Rand einer Menge Text in einem Div mit vertikalem Bildlauf finden. Das "X" sitzt an Ort und Stelle (bewegt sich nicht mit gescrolltem Text und bewegt sich dennoch mit dem umschließenden div-Container nach links oder rechts, wenn der Benutzer die Breite des Browserfensters ändert! Somit ist es vertikal "fixiert", aber relativ zu positioniert das umschließende Element horizontal!

Bevor ich das zum Laufen brachte, rollte das "X" nach oben und außer Sicht, als ich den Textinhalt nach unten scrollte.

Entschuldigung, dass ich meine Javascript-Funktion hideDiv () nicht bereitgestellt habe, aber dies würde diesen Beitrag unnötig verlängern. Ich habe mich dafür entschieden, es so kurz wie möglich zu halten.

Bruce Allen
quelle
Solide Cross-Browser-Lösung, funktioniert in IE8 wie ein Zauber.
dmi3y
1

Ich habe eine jsfiddle erstellt, um zu demonstrieren, wie dies mit transform funktioniert.

HTML

<div class="left">
    Content
</div>
<div class="right">
<div class="fixedContainer">
    X
</div>
    Side bar
</div>

CSS

body {
  margin: 0;
}
.left {
  width: 77%;
  background: teal;
  height: 2000px;
}
.right {
  width: 23%;
  background: yellow;
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
}
.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    //right: 0;
    top: 0%;
    transform: translateX(-100px);
}

jQuery

$('.fixedContainer').on('click', function() {
    $('.right').animate({'width': '0px'});
  $('.left').animate({'width': '100%'});
});

https://jsfiddle.net/bx6ktwnn/1/

Wen
quelle
1

Ich habe das gleiche Problem, eines unserer Teammitglieder gibt mir eine Lösung. Um die Div-Fix-Position und relativ zu anderen Div zuzulassen, besteht unsere Lösung darin, einen Vater-Container zu verwenden, der das Fix-Div umschließt und Div rollt.

<div class="container">
  <div class="scroll"></div>
  <div class="fix"></div>
</div>

CSS

.container {
  position: relative;
  flex:1;
  display:flex;
}

.fix {
  prosition:absolute;
}
Jay0Lu
quelle
1
/* html */

/* this div exists purely for the purpose of positioning the fixed div it contains */
<div class="fix-my-fixed-div-to-its-parent-not-the-body">

     <div class="im-fixed-within-my-container-div-zone">
          my fixed content
     </div>

</div>



/* css */

/* wraps fixed div to get desired fixed outcome */
.fix-my-fixed-div-to-its-parent-not-the-body 
{
    float: right;
}

.im-fixed-within-my-container-div-zone
{
    position: fixed;
    transform: translate(-100%);
}
Carol McKay
quelle
1

Ja, es ist möglich, solange Sie die Position ( topoder leftusw.) Ihres fixedElements nicht festlegen (Sie können jedoch weiterhin margineine relative Position festlegen). Simon Bos einiger Zeit darüber geschrieben .

Erwarten Sie jedoch nicht, dass ein festes Element mit nicht festen Verwandten scrollt.

Sehen Sie hier eine Demo .

Javarome
quelle
0

Ich habe so etwas vor einiger Zeit gemacht. Ich war ziemlich neu in JavaScript, daher bin ich sicher, dass Sie es besser machen können, aber hier ist ein Ausgangspunkt:

function fixxedtext() {
    if (navigator.appName.indexOf("Microsoft") != -1) {
        if (document.body.offsetWidth > 960) {
            var width = document.body.offsetWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (document.body.offsetWidth < 960) {
            var width = 960 - document.body.offsetWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    else {
        if (window.innerWidth > 960) {
            var width = window.innerWidth - 960;
            width = width / 2;
            document.getElementById("side").style.marginRight = width + "px";
        }
        if (window.innerWidth < 960) {
            var width = 960 - window.innerWidth;
            document.getElementById("side").style.marginRight = "-" + width + "px";
        }
    }
    window.setTimeout("fixxedtext()", 2500)
}

Sie müssen Ihre Breite einstellen. Anschließend wird die Fensterbreite ermittelt und der Rand alle paar Sekunden geändert. Ich weiß, dass es schwer ist, aber es funktioniert.

webLacky3rdClass
quelle
Ein Problem, das ich bei diesem Ansatz sehen kann, ist, dass er auf einem Timer (2,5 Sekunden) basiert. Wenn der Benutzer während dieser Zeit die Größe des Fensters ändert, dauert es bis zu dieser Zeit, bis es sich selbst korrigiert. Das ist nicht das Beste, wenn es um die Benutzererfahrung geht. Wenn dies hilfreich ist, versuchen Sie auch, Ereignis-Listener anstelle von Timern zu verwenden.
Joseph Marikle
Wie ich schon sagte, es ist ein ALTES Skript, eines meiner ersten, und ich musste es nicht reparieren. Es ist also nicht das Beste, aber es kann ein guter Ausgangspunkt sein.
webLacky3rdClass
0

Es ist möglich, wenn Sie JavaScript verwenden. In diesem Fall das jQuery Plugin Sticky-Kit :

Paz Aricha
quelle
0

Mein Projekt ist die .NET ASP Core 2 MVC Angular 4-Vorlage mit Bootstrap 4. Das Hinzufügen von "Sticky-Top" zur Haupt-App-Komponente html (dh app.component.html) in der ersten Zeile hat wie folgt funktioniert:

<div class='row sticky-top'>
    <div class='col-sm-12'>
        <nav-menu-top></nav-menu-top>
    </div>
</div>
<div class="row">
    <div class='col-sm-3'>
        <nav-menu></nav-menu>
    </div>
    <div class='col-sm-9 body-content'>
        <router-outlet></router-outlet>
    </div>
</div>

Ist das die Konvention oder habe ich das zu stark vereinfacht?

Adam Cox
quelle
0

Wenn Sie position:fixedCSS - Regel und versuchen anzuwenden top/ left/ right/ bottomsie das Element relativ zum Fenster positioniert.

Eine Problemumgehung besteht darin, marginEigenschaften anstelle von top/ left/ right/ zu verwendenbottom

Sunil Garg
quelle
-1

Überprüfen Sie dies:

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body style="width: 1000px !important;margin-left: auto;margin-right: auto">
        <div style="width: 100px; height: 100px; background-color: #ccc; position:fixed;">
        </div>
        <div id="1" style="width: 100%; height: 600px; background-color: #800000">
        </div>
        <div id="2" style="width: 100%; height: 600px; background-color: #100000">
        </div>
        <div id="3" style="width: 100%; height: 600px; background-color: #400000">
        </div>
    </body>
</html>
Kunal
quelle
5
Ich denke nicht, dass dies genau das erreicht, wonach das OP gefragt hat.
Jason Wyatt