/ / Bild zu Bildlaufleisten folgen - Javascript, HTML, CSS, Bild, Cursor

Bild zu Bildlaufleisten folgen - Javascript, HTML, CSS, Bild, Cursor

Ich bin nicht sicher, wo ich anfangen soll. Ich suche nach der besten Möglichkeit, ein Bild zu erstellen, das einer Browser-Bildlaufleiste auf einer Webseite oder am unteren Rand einer Webseite folgt. Wenn Sie zum Beispiel eine Webseite halb heruntergerollt haben, zeigt ein Bild (Pfeil) auf die Bildlaufleiste. Wenn Sie nach unten oder über die Seite fahren, wird auch das Bild verschoben. Ich suche keine Skripte, deren Bild einem Cursor folgt, da dies nicht berücksichtigt, dass ein Benutzer möglicherweise das Mausrad verwendet. In diesem Fall bewegt sich der Cursor nicht, obwohl die Seite angezeigt wird.

Danke für Ihre Hilfe.

Antworten:

0 für die Antwort № 1

Benutze die position: fixed Das Element wird also relativ zum Browserfenster positioniert.


0 für die Antwort № 2

Die Informationen darüber, wie der Browser die Bildlaufleiste anzeigt, ob es überhaupt eine gibt, auf welcher Seite des Fensters sie sich befindet oder wie sie dargestellt wird ist nicht verfügbar zur Webseite.

Mit etwas Mathe kann man jedoch ordentlich raten.

Nehmen Sie die document scroll position / document height * display port height Dadurch erhalten Sie eine ungefähre Pixelanzahl für die Position der Bildlaufleiste am oberen Bildschirmrand.

Machen Sie Ihr HTML-Element position: fixed; und setze die top: 123px um die obige Berechnung abzugleichen. Aktualisieren Sie dies im Scroll-Ereignis.

Sie müssen bei Google nach den spezifischen JavaScript-Befehlen suchen, um dies zu erreichen, aber konzeptionell sollten Sie damit ziemlich nah dran sein.


Wenn Sie genauer sein möchten, beachten Sie, dass die Größe der Bildlaufleiste in der Regel sein wird (display port height / document height) * display port height. Wenn Sie diesen Wert vom Bewegungsbereich Ihres Pfeils subtrahieren, addieren Sie die Hälfte dieses Werts zum top Der Pixelwert Ihres Pfeils sollte normalerweise auf die Mitte der Bildlaufleiste zeigen.