JavaScript Text an bestimmter Stelle fixieren

momdiavlo · 27. Januar 2016

Hi CB`ler,

ich möchte auf einer Seite einen Text für eine gewisse Scroll-Strecke fixieren.
Wenn man zu einem bestimmten Punkt auf der Seite scrollt, soll ein bestimmter Text oben fixiert werden, und dann aber wieder weggehen, wenn eine andere Stelle der Seite erreicht ist. Ist verständlich was ich meine?

So habe ich den Text/Feld bisher fixiert:
http://jsfiddle.net/HFjU6/1/

Kann ich da irgendwie eine Art Anker setzen, wann ein Text fixiert werden soll und dann wieder einen Anker, wenn er nicht mehr fixiert werden soll?

/Edit:

Ich habe ein Beispiel gefunden, das genau das tut, was ich möchte:
Link Süddeutsche
Hier Links bei den Socialen-Icons, die fixieren sich für einen bestimmten scroll-Bereich.

Vielen Dank schon einmal!

smallwall · 27. Januar 2016

Stichwort scrollTop
http://www.w3schools.com/jsref/prop_element_scrolltop.asp

irgendwas wie
(Edit: Das hier nicht benutzen, es prüft, ob der Inhalt von #box gescrollt ist...)

PHP:

if (document.getElementById('box').scrollTop >= 200) {
document.getElementById('box').style.display = 'none';
}

Untested, without warranty.

Hier, das sieht brauchbar aus:

PHP:

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
        document.getElementById("myImg").className = "slideUp";
}

momdiavlo · 27. Januar 2016

@smallwall
Das sind nach einer guten Idee aus. Nur wie würde ich den fixierten Text wieder wegbekommen, wenn eine bestimmte Stelle erreicht wird?

smallwall · 27. Januar 2016

Ausblenden:

PHP:

document.getElementById('box').style.display = 'none';

"Wegscrollen lassen" müsste ungefähr so gehen

PHP:

document.getElementById('box').style.position = 'relative';

Bzw. voher

PHP:

var boxtop = document.body.scrollTop;
document.getElementById('box').style.top = boxtop;

Hier kurz zusammenkopiert und verbessert:
http://devphp.de/sub/js3.php

momdiavlo · 27. Januar 2016

Das sieht nach was aus! Vielen Dank, schaue ich mir genauer an und probiere es direkt mal aus.

smallwall · 27. Januar 2016

http://devphp.de/sub/js4.php noch eine Spur bessers JS

momdiavlo · 27. Januar 2016

Das klappt soweit einigermaßen, nur haut das nicht mehr mit meiner dynamischen Seite hin. Kann man das alles auch mit Ankern versehen? Also an der Stelle, ab der der Text erscheinen soll einen Anker setzen und dann noch einen Anker, wenn der Text wieder verschwinden soll?

smallwall · 27. Januar 2016

Da brauchst Du keine Anker, da brauchst Du andere Conditions in der if...
Ungefähr so:

PHP:

if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350)

machst Du zu

PHP:

if ((document.body.scrollTop > 350 && document.body.scrollTop < 420 ) || ( document.documentElement.scrollTop > 350 && document.documentElement.scrollTop < 420))

Dann ist zwischen 350 und 420px die if Abfrage true, musst die Zahlen halt anpassen, bzw. > und <.

Um das ganze für verschieden lange Seiten zu realisieren musst Du noch die Höhe des Contents irgendwie einbauen.

PHP:

height = document.getElementById('content').style.height;

bzw .offsetHeight falls die Höhe nicht gesetzt wird, das hat den Nachteil, dass margin mit einbezogen wird

smallwall · 5. Februar 2016

Ach, schau mal an, hier habe ich zufällig genau so ein Script in Aktion gefunden.
http://www.giga.de/smartphones/sams...s-mit-externer-festplatte-verbinden-so-gehts/
Die Facebook, Twitter, G+ -Links werden erst ab einer bestimmten Scrolltiefe angezeigt. Das ist genau das, was ich für Dich zusammenkopiert habe, nur mit dem kleinen Unterschied, dass dort wohl > "Zahl" steht, statt < "Zahl" (da es eingeblendet wird, statt ausgeblendet).

Suche

JavaScript Text an bestimmter Stelle fixieren

momdiavlo

Lt. Commander

smallwall

Lt. Junior Grade

momdiavlo

Lt. Commander

smallwall

Lt. Junior Grade

momdiavlo

Lt. Commander

smallwall

Lt. Junior Grade

momdiavlo

Lt. Commander

smallwall

Lt. Junior Grade

smallwall

Lt. Junior Grade

Ähnliche Themen