Wie kann ich einen div-stick an den oberen Rand des Bildschirms, wenn Sie erst einmal gescrollt?
Ich würde gern ein div, das befindet sich unter einem block der Inhalt, sondern auch, dass, sobald die Seite gescrollt genug, Kontakt zu seiner oberen Grenze, wird fixiert und scrollt mit der Seite. Ich weiß, ich habe gesehen, mindestens ein Beispiel für diese online, aber ich kann mich nicht erinnern, es für das Leben von mir.
Irgendwelche Gedanken?
Juni 2014, die Sticky-kit-jQuery-plugin ist eine der einfachsten Möglichkeiten, bietet eine extrem niedrige Barriere zum Eintrag und viele features. Großartiger Ort zu starten, wenn Sie auf der Suche nach einer einfachen Möglichkeit, um aus dem Boden schnell.
CSS-tricks: css-tricks.com/scroll-fix-content
Hinzufügen von CSS -
Heilige Scheiße, dass
CSS-tricks: css-tricks.com/scroll-fix-content
Hinzufügen von CSS -
position: sticky; top:0;
funktioniert in den meisten Browsern im Januar 2017.Heilige Scheiße, dass
position: sticky;
Ding ist magisch.InformationsquelleAutor evanr | 2009-08-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Könnten Sie einfach die css-Positionierung Ihres Elements als behoben:
Edit: sollten Sie das element mit position absolute, sobald die scroll-offset erreicht hat, das element, es sollte geändert werden, befestigt, und die Spitze sollte auf null gesetzt werden.
Können Sie erkennen die top-scroll-offset des Dokuments mit der scrollTop Funktion:
Wenn die scroll-offset erreicht 200, wird das element stick an die Spitze des browser-Fensters, da ist so behoben.
edit hat in der Tat erfüllen jetzt die Frage, aber du hast noch ein problem, wenn die Seite scrollt wieder nach oben wieder. Sie konnten nach erreichen der element scrollTop speichern Sie es irgendwo, und wenn die Seite trifft, die position wieder (beim scrollen nach oben) ändern Sie die css auf Standard zurück... wohl besser, dies zu tun mit ein .toggleClass dann...
Das ist ziemlich viel, was bei mit aber ich habe, um das entfernen der festen Position, wenn das Fenster gescrollt wird zurück an die Spitze.
if ($(this).scrollTop() < 200 && $el.css('position') == 'fixed') { $('.fixedElement').css({'position': 'static', 'top': '0px'}); }
Ich das in die Antwort, ziemlich wichtige Sachen 🙂
die
new example
link, den Sie gab, ist so viel sauberer und klarer, dass ich es nicht einmal sehen! -_-InformationsquelleAutor CMS
Haben Sie gesehen, in diesem Beispiel auf Google-Code ist Ausgabe Seite und (erst vor kurzem) auf Stack Overflow edit-Seite.
CMS die Antwort nicht wieder die Position, wenn Sie Blättern Sie zurück. Hier ist die schamlos geklauten code von Stack Overflow:
Und eine einfache live-demo.
Jung -, Skript-Kostenlose alternative ist
position: sticky
, die ist unterstützt in Chrome, Firefox und Safari. Finden Sie die Artikel auf HTML5Rocks und demo, und Mozilla docs.Ich habe eine Menge Probleme mit diesem, für das Leben von mir ich kann nicht replizieren, ich habe sogar versucht, zu replizieren, die live-demo und seine nicht funktioniert. kann mir jemand link zu einem tutorial eine Schritt für Schritt Anleitung?
Dies scheint zu funktionieren, wenn ich die gleiche version von jQuery als demo (1.3.2). Irgendwann
offset
muss gestoppt akzeptieren ein Objekt als Eingabe api.jquery.com/offset. @Eddie Deine änderungen sollten sicher sein, mit aktuellen jQuery.Gibt es irgendeinen Grund konnten Sie nicht ersetzen
var d = $("#scroller-anchor").offset().top;
mitvar d = $("#sidebar").offset().top;
und loszuwerden, die leer scroller-Anker-div alle zusammen? Hier meine Gabel um zu zeigen, was ich bin reden über.Ich vermute, dass, wenn es Ränder oder Polsterung, die Sie möchten in der Lage sein zu kontrollieren, wo der scroller positioniert ist, relativ zu dem Behälter.
InformationsquelleAutor Josh Lee
Ab Januar 2017 und die Freisetzung von Chrom 56, den meisten Browsern im Allgemeinen Gebrauch unterstützen
position: sticky
- Eigenschaft in CSS.funktioniert der trick für mich in Firefox und Chrome.
In Safari, die Sie noch brauchen, um zu verwenden
position: -webkit-sticky
.Polyfills sind verfügbar für Internet Explorer und Edge; https://github.com/wilddeer/stickyfill scheint ein gutes Jahr zu sein.
Sie nicht bekommen, nichts einfacher als das. 'Nuff said...
Kann nicht einfacher sein als dieses 🙂
InformationsquelleAutor Colin 't Hart
Ich hatte das gleiche problem wie du, und endete damit, einem jQuery-plugin zu kümmern. Es löst tatsächlich alle Probleme, die Menschen haben hier aufgelistet sind, plus es fügt ein paar optionale Funktionen zu.
Optionen
https://github.com/donnyv/sticky-panel
demo: http://htmlpreview.github.io/?https://github.com/donnyv/sticky-panel/blob/master/jquery.stickyPanel/Main.htm
Hey Donny, auch, Liebe deine plugin (v1.4.1)... war über ein Heft, Block elelments verloren Ihre Breite, wenn keiner angegeben wurde. So verändert es beim abziehen... nur durch die Einstellung der Breite, so bleibt es das gleiche.
code
// detach-panel-Knoten.css({ "margin": 0, "Links": nodeLeft, "top": newNodeTop, "position": "fixed", "width": Knoten.width() });code
Gesucht und versucht, viele Lösungen, und das funktionierte "direkt aus der box." Fantastische Arbeit! Danke!!!
I ' V Hinzugefügt-iPad support, Fix refresh Fehler und fügte onDetached & onReattached Veranstaltungen. Die neuen Veranstaltungen erhalten Sie Zugriff auf die panel & spacerpanel nach detached & angefügt.
Auch wurde eine parentSelector-option zur Unterstützung von scrolling divs.
InformationsquelleAutor Donny V.
Dies ist, wie ich es mit jquery. Das alles war zusammen gebastelt aus verschiedenen Antworten auf stack overflow. Diese Lösung speichert die Selektoren für mehr Leistung und löst sich auch die "springen" - Problem, wenn der sticky-div klebrig.
Check it out auf jsfiddle: http://jsfiddle.net/HQS8s/
CSS:
JS:
InformationsquelleAutor JohnB
Hier ist eine weitere option:
JAVASCRIPT
Ihre
#myElementToStick
sollte mitposition:absolute
CSS-Eigenschaft.InformationsquelleAutor kunde
Als Josh Lee und Colin 't Hart gesagt haben, könnten Sie Optional verwenden Sie einfach
position: sticky; top: 0;
Anwendung auf das div, die Sie möchten, dass der Bildlauf bei...Plus, das einzige, was Sie tun müssen ist, kopieren Sie diese in den oberen Rand der Seite oder formatieren Sie es entsprechend in einer externen CSS-Stylesheet:
Ersetzen Sie einfach
#sticky_div's_name_here
mit dem Namen des div, d.h. wenn Ihr div war<div id="example">
würde man#example { position: sticky; top: 0; }
.InformationsquelleAutor Max Garner
Meine Lösung ist ein bisschen verbose, aber es Griffe variable Positionierung vom linken Rand bei zentrierten layouts.
InformationsquelleAutor Josh Russo
Hier ist eine weitere version, um zu versuchen, für diejenigen, die Probleme mit den anderen. Er zieht zusammen die Techniken, die in diese doppelte Frage, und generiert die erforderlichen Helfer DIVs dynamisch, so dass keine zusätzliche HTML erforderlich ist.
CSS:
JQuery:
Um ein element klebrig tun:
Wenn das element klebrig, wird der code verwaltet die position der übrigen Inhalte zu halten Sie springen in die Lücke, die durch die klebrige element. Es gibt auch den sticky-element in seine ursprüngliche nicht-klebrige position beim scrollen wieder oben.
InformationsquelleAutor Dan
Hier ist eine erweiterte version von Josh Lees Antwort. Wenn Sie möchten, dass die div werden auf der Seitenleiste auf der rechten Seite, und schweben in einem Bereich (D. H., Sie müssen angeben, die oberen und unteren Anker-Positionen). Es behebt auch einen Fehler, wenn Sie diese auf mobile Geräte (die Sie benötigen, um zu überprüfen, Links, scroll-position, sonst der div wird dem Bildschirm bewegen).
InformationsquelleAutor realwecan
Stieß ich auf diese bei der Suche für die gleiche Sache. Ich weiß, es ist eine alte Frage, aber ich dachte, ich würde bieten eine aktuellere Antwort.
Scrollorama hat einen "pin-it" - Funktion, die ist genau das, was ich suchte.
http://johnpolacek.github.io/scrollorama/
InformationsquelleAutor pbryd
Die Informationen zur Beantwortung dieser Frage kann Ihnen helfen, Evan:
Überprüfen, ob element sichtbar ist nach dem scrollen
Dass Sie im Grunde wollen, ändern Sie den Stil des Elements, um es zu fixen, nur, nachdem Sie überprüft, dass das Dokument ein.Körper.scrollTop Wert ist gleich oder größer als die oben in Ihrem element.
InformationsquelleAutor Amber
Die akzeptierte Antwort, funktioniert aber nicht bewegen zurück zur vorherigen position, wenn Sie scrollen über Sie. Es ist immer fest an die Spitze, nachdem er dort platziert.
jleedev Antwort sollte arbeiten, aber ich war nicht in der Lage, um es an die Arbeit. Sein Beispiel Seite auch nicht funktioniert hat (für mich).
InformationsquelleAutor Forge
Können Sie hinzufügen, weitere 3 Zeilen, so dass, wenn der Benutzer Blättern zurück an die Spitze der div-stick auf seinen alten Platz:
Hier ist der code:
InformationsquelleAutor Alex Rashkov
Habe ich links Einstellung in ein div, so ist es eine vertikale Liste von Buchstaben und eine Zahl links.
Ich dann das setup dieses handy die jQuery-Funktion zum speichern der geladenen position und ändern Sie dann die position auf fixed beim scrollen über diese position.
HINWEIS: dies funktioniert nur, wenn die Verknüpfungen sichtbar, die beim laden der Seite!!
InformationsquelleAutor Artistan
Ich habe einige der arbeiten über diese zu erstellen tech. Ich habe mich verbessert es ein bisschen und dachte, ich würde teilen meiner Arbeit. Hoffe, das hilft.
jsfuddle Code
Dies ist ein wenig mehr Dynamik, ein Weg, um die schriftrolle. Es braucht einige arbeiten und ich werde mich irgendwann verwandeln diese in ein pluging aber das ist, was ich kam mit nach Stunde Arbeit.
InformationsquelleAutor brand-it
In javascript können Sie tun:
InformationsquelleAutor htmlfarmer
Keine exakte Lösung, sondern eine tolle alternative zu betrachten,
diese CSS NUR im Oberen Teil des Bildschirms Bildlaufleiste. Gelöst alle das problem mit NUR CSS, KEINE JavaScript, KEINE JQuery, Keine die Arbeit des Gehirns (lol).
Genießen meine Geige 😀 alle codes sind da drin enthalten 🙂
CSS
Setzen den Inhalt lange genug, so können Sie die Wirkung sehen hier 🙂
Oh, und der Bezug ist in es als gut, für die Tatsache, dass er verdient zu seinem Kredit
CSS NUR im Oberen Teil des Bildschirms Bildlaufleiste
interessant, ppl gegen eine gute Lösung lol
Ich bin nicht gegen eine gute Lösung, aber den code in deine Antwort bietet eine Möglichkeit, so etwas wie ein Menü, um halten immer an der Spitze. Aber das war nicht die Frage...
Auch das Menü selbst ist wirklich ein 'div' , so .... übertragbar? lol
Sie sind gerade Fixierung des div und nicht tun, etwas klebrig auf den Blättern.
InformationsquelleAutor weia design
Hier ein Beispiel mit jquery-plugin sichtbar: http://jsfiddle.net/711p4em4/.
HTML:
CSS:
JS (include jquery-plugin sichtbar):
InformationsquelleAutor DRD
klebrig, bis der Fußzeile trifft der div:
InformationsquelleAutor Ottens
Können Sie dies mit der
css()
- Methode von jQuery:InformationsquelleAutor Thuso Mokopotsa