it-swarm.com.de

Was ist der einfachste jQuery-Weg, um ein 'position: fixed' (immer oben) div zu haben?

Ich bin relativ neu bei jQuery, aber was ich bisher gesehen habe, gefällt mir. Was ich möchte ist, dass ein div (oder ein beliebiges Element) oben auf der Seite steht, als ob "position: fixed" in jedem Browser funktioniert.

Ich möchte nichts Kompliziertes. Ich möchte keine riesigen CSS-Hacks. Ich würde es vorziehen, wenn die Verwendung von jQuery (Version 1.2.6) gut genug ist, aber wenn ich jQuery-UI-Core brauche, ist das auch in Ordnung.

Ich habe $ ("# topBar") ausprobiert. ScrollFollow (); <- aber das geht langsam ... Ich möchte, dass etwas wirklich fixiert erscheint.

35
Timothy Khouri

Mit diesem HTML:

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

Dies ist das Javascript, das Sie verwenden möchten. Es fügt ein Ereignis an die Bildlaufleiste des Fensters an und bewegt das Element nach unten, bis Sie einen Bildlauf durchgeführt haben.

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

Wie in den Kommentaren unten ausgeführt, wird es nicht empfohlen, Ereignisse an das Bildlaufereignis anzuhängen. Wenn der Benutzer einen Bildlauf durchführt, löst dies eine Menge aus und kann zu Leistungsproblemen führen. Erwägen Sie die Verwendung mit Ben Alman debounce/throttle plugin, um den Overhead zu reduzieren.

60
nickf

Bei Browsern, die "position: fixed" unterstützen, können Sie einfach Javascript (jQuery) verwenden, um die Position beim Scrollen in "fix" zu ändern. Dadurch entfällt das Springen beim Scrollen mit den hier aufgeführten Lösungen $ (window) .scroll (function ()).

Ben Nadel zeigt dies in seinem Tutorial: Erstellen eines Elements mit manchmal fester Position mit jQuery

7
Schmoove

Wunderschönen! Ihre Lösung war 99% ... Statt "this.scrollY" habe ich "$ (window) .scrollTop ()" verwendet. Noch besser ist, dass für diese Lösung nur die Bibliothek jQuery1.2.6 erforderlich ist (keine zusätzlichen Bibliotheken erforderlich).

Der Grund, warum ich diese Version besonders wollte, ist, dass MVC derzeit damit ausgeliefert wird.

Hier ist der Code:

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

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

HTML/CSS-Ansatz

Wenn Sie nach einer Option suchen, für die nicht viel JavaScript erforderlich ist (und alle damit verbundenen Probleme, z. B. schnelle Scroll-Ereignisaufrufe), können Sie dasselbe Verhalten erzielen, indem Sie einen Wrapper <div> und einige Stile hinzufügen . Ich habe ein viel glatteres Scrollen (keine nachgebenden Elemente) festgestellt, als ich den folgenden Ansatz verwendete:

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 kann dieser Ansatz für das Scrollen von Regionen geändert werden, die während der Laufzeit Inhalt gewinnen/verlieren (was dazu führen würde, dass Bildlaufleisten hinzugefügt/entfernt werden).

2
Mac Attack

Für alle, die noch eine einfache Lösung in IE 6 suchen. Ich habe ein Plugin erstellt, das die Position IE 6 handhabt: Problem behoben und sehr einfach zu bedienen: http: //www.fixedie. com/

Ich habe es in einem Versuch geschrieben, die Einfachheit des verspäteten Png nachzuahmen, wobei die einzigen notwendigen Änderungen darin bestehen, das Skript hinzuzufügen und aufzurufen.

1
tbranyen

In einem Projekt möchte mein Client eine Floating-Box in einem anderen div haben, daher verwende ich eine margin-top-CSS-Eigenschaft anstelle von top, damit meine Floating-Box im übergeordneten Objekt verbleibt.

0
Tom