Was ist die einfachste jQuery-Methode, um eine "position: fixed" (immer oben) div zu haben?

Ich bin relativ neu in jQuery, aber bisher was ich gesehen habe gefällt mir. Was ich will, ist für ein div-Element (oder Elemente), um über den oberen Rand der Seite, als ob "position: fixed" funktioniert in jedem browser.

Ich möchte nicht etwas kompliziert. Ich möchte nicht riesige CSS-hacks. Ich würde es vorziehen, wenn nur die Verwendung von jQuery (version 1.2.6) ist gut genug, aber wenn ich die jQuery-UI-core, dann ist das auch in Ordnung.

Habe ich versucht, $("#topBar").scrollFollow(); <-- aber das geht langsam... ich will etwas wirklich behoben.

InformationsquelleAutor der Frage Timothy Khouri | 2008-11-02

  1. 60

    Mit diesem HTML:

    <div id="myElement" style="position: absolute">This stays at the top</div>

    Dies ist die javascript, die Sie verwenden möchten. Es legt ein Ereignis an das Fenster Blättern und bewegt das element nach unten so weit wie Sie einen Bildlauf durchgeführt haben.

    $(window).scroll(function() {
    $('#myElement').css('top', $(this).scrollTop() + "px");
});

    Wie bereits in den Kommentaren unten, ist es nicht empfehlenswert, um Ereignisse anfügen, um das scroll-Ereignis, da der Nutzer scrollt, es feuert EINE ganze MENGE und kann die Ursache für performance-Probleme. In Erwägung ziehen, es mit Ben Alman ist debounce/Gas plugin um den Systemaufwand zu verringern.

    InformationsquelleAutor der Antwort nickf

  2. 7

    Für diejenigen Browser, die das unterstützen "position: fixed" Sie können einfach mit javascript (jQuery) ändern Sie die position auf "fixed" beim scrollen. Dadurch entfällt die schreckhaftigkeit beim scrollen mit dem $(window).scroll(function()) die hier aufgeführten Lösungen.

    Ben Nadel veranschaulicht dies in seinem tutorial:
    Erstellen Sie Eine Manchmal-Feste-Position-Element Mit jQuery

    InformationsquelleAutor der Antwort Schmoove

  3. 6

    Schön! Ihre Lösung war 99%... statt".scrollY" habe ich "$(window).scrollTop()". Was noch besser ist, dass diese Lösung erfordert nur die jQuery1.2.6 Bibliothek (keine zusätzlichen Bibliotheken benötigt).

    Der Grund, warum ich wollte, dass die version, die in allem ist, weil das ist, was Schiffe mit MVC aktuell.

    Hier der code:

    $(document).ready(function() {
    $("#topBar").css("position", "absolute");
});

$(window).scroll(function() {
    $("#topBar").css("top", $(window).scrollTop() + "px");
});

    InformationsquelleAutor der Antwort Timothy Khouri

  4. 2

    HTML/CSS-Ansatz

    Wenn Sie sich für eine option, die nicht erfordert viel JavaScript (und alle die Probleme, die mit ihm gekommen, wie schnelle scroll-Ereignis aufruft), ist es möglich zu gewinnen, das gleiche Verhalten, indem ein wrapper - <div> und ein paar Stile. Ich bemerkte viel glatter scrollen (keine Elemente, die hinterher hinken), wenn ich den folgenden Ansatz:

    JS Fiddle

    HTML

    <div id="wrapper">
  <div id="fixed">
    [Fixed Content]
  </div><!-- /fixed -->
  <div id="scroller">
    [Scrolling Content]
  </div><!-- /scroller -->
</div><!-- /wrapper -->

    CSS

    #wrapper { position: relative; }
#fixed { position: fixed; top: 0; right: 0; }
#scroller { height: 100px; overflow: auto; }

    JS

    //Compensate for the scrollbar (otherwise #fixed will be positioned over it).
$(function() {
  //Determine the difference in widths between
  //the wrapper and the scroller. This value is
  //the width of the scroll bar (if any).
  var offset = $('#wrapper').width() - $('#scroller').get(0).clientWidth;

  //Set the right offset
  $('#fixed').css('right', offset + 'px');​
});

    Natürlich, dieser Ansatz modifiziert werden kann, für den Bildlauf in Regionen, die gewinnen/verlieren, der den Inhalt während der Laufzeit (die in Ergänzung/Entfernung von scrollbars).

    InformationsquelleAutor der Antwort Mac Attack

  5. 1

    Für jemand, der noch auf der Suche für eine einfache Lösung, die im IE 6. Erstellt habe ich ein plugin, mit dem IE 6 position: fixed-problem und ist sehr einfach zu bedienen: http://www.fixedie.com/

    Ich schrieb es in einem Versuch zu imitieren, die Einfachheit der belatedpng, wo die einzigen änderungen, die notwendig sind, hinzufügen des Skripts und die Berufung auf Sie.

    InformationsquelleAutor der Antwort tbranyen

  6. 0

    In einem Projekt, mein Kunde möchte eine floating-box in ein anderes div, so dass ich mit margin-top CSS-Eigenschaft anstatt oben, um meine floating-box bleiben, die in seinem übergeordneten Element.

    InformationsquelleAutor der Antwort

Schreibe einen Kommentar