Wie mache ich ein div folgt mir, wie ich nach unten scrollen die Seite?

Den Benutzer der Website.

Zu diesem Zeitpunkt, das div-Element in der Mitte der Seite.

Als er scrollt auf der Seite nach unten, das div beginnt erst, nach oben zu bewegen, aber einmal trifft es die top -, bleibt es dort.

Als er blättert weiter unten auf der Seite das div bleibt in der Nähe der Spitze, immer für den Benutzer sichtbar.

Als er blättert die Seite den ganzen Weg an die Spitze der div wieder einmal bleibt in position, wo es ursprünglich war.

InformationsquelleAutor TIMEX | 2011-07-14
  1. 13

    Können Sie Haken die scroll Veranstaltung auf der window Objekt. Wenn die Verarbeitung des Ereignisses, Blick auf die vertikale scroll-position der Fenster/Dokument (siehe diese Antwort auf SO für wie das zu tun). Absolute Positionierung für Ihre div, und aktualisieren Sie Ihre top koordinieren wie nötig.

    FWIW, ich wäre sehr vorsichtig, dies zu tun. In der Regel, wenn ein Benutzer einen Bildlauf durchführt, ist es, weil Sie wollen, schauen Sie sich verschiedene Inhalte als das, was auf der Seite ist. Persönlich, ich hasse Boxen, die mich verfolgen, um auf web-Seiten. 🙂 Aber das bedeutet nicht, gibt es nicht einen guten Grund für das tun dies gelegentlich.

    Sehr einfaches Beispiel (live-Kopie):

    CSS:

    #box {
  /* Position absolutely, 30px down from the top */
  position: absolute;
  top: 30px;

  /* In my case I'm centering it in the window; do what you like */
  margin-left: -100px;
  left: 50%;
  width: 200px;

  /* These are just for my example */
  height: 1.25em;
  border: 1px solid #bbb;
  text-align: center;
}

    HTML:

    <div id='box'>I'm the box</div>

    JavaScript:

    window.onload = function() {

  function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      //Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      //IE in standards mode
      return d.scrollTop;
    }

    //IE in quirks mode
    return document.body.scrollTop;
  }

  window.onscroll = function() {
    var box = document.getElementById('box'),
        scroll = getScrollTop();

    if (scroll <= 28) {
      box.style.top = "30px";
    }
    else {
      box.style.top = (scroll + 2) + "px";
    }
  };

};

    (In meinem Fall, ich bin immer 2 Pixel unter der oberen, aber wenn Sie nicht möchten, dass Sie anpassen können die zahlen entsprechend.)

    • Gibt es einen Weg, um das Feld stop nach dem scrollen an einem bestimmten Punkt?
    • Sicher, nur das begrenzen der Wert scroll im onscroll handler.
    • Ich habe versucht, ihn zu stoppen scrollen 900 Pixel, und es scheint zu funktionieren, wenn ich diesen code, um das onscroll-handler: if(scroll > 500){ scrollen = 500; }
    InformationsquelleAutor T.J. Crowder
  2. 0

    Wie können Sie andere Personen zur Verfügung gestellt ready-Skripten, aber wenn Sie wollen eine, die Ihre selbst (waste of time) [oder vielleicht möchten Sie lernen].. hier ist ein guter Punkt um zu starten:

    var hscroll = (document.all ? document.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.scrollTop : window.pageYOffset);
    InformationsquelleAutor
  3. -1

    http://jsfiddle.net/25rgq/

    Dies ist eine alte Implementierung der gewünschten Funktionalität, die ich verwendet habe. Es ist eines der ersten Skripte, die ich schrieb, so JS & jQuery wissen, Menschen werden wahrscheinlich Erbrechen. Ich schrieb es vor allem durch all die Beispiele, die ich online gefunden wurden zentriert auf das verschieben der DIV anstatt es zu fixen, und nach und nach hinzufügen, um die top-margin der box führte in der wirklich abgehackte Bewegung.

    Im Grunde ändert es Feste wie das angegebene element ist ein benutzerdefiniertes set-Marge aus dem oberen Rand des browser-Fenster, und bewegt sich nach unten, wenn es zuvor auf einem benutzerdefinierten offset vor unseren footer (wir wollten zu beschränken, die followbox nicht bewegen Vergangenheit unserer sidebar Platz).

    Hoffe, dass es von nutzen ist, und, wenn sich ein plugin um diese zu bewältigen heutzutage besteht, würden Sie wahrscheinlich besser sein, es zu nutzen.

    • Es gibt jetzt falsch mit nicht mit jQuery
    • Außer der Tatsache, dass eine kompetente Umsetzung, vielleicht veröffentlicht ein plugin wäre beiden weiter optimiert und weniger fehleranfällig und einfacher zu Haken in verschiedene Arten von web-sites 🙂
    InformationsquelleAutor red
Schreibe einen Kommentar