Hallo in die Runde.
ich möchte gerne einen Website-Hintergrund mit dem WD10 Premium erst an einer bestimmten Position einlenden lassen. Zunächst soll sich die Seite ohne Hintergrund-Balken öffnen. Erst wenn ich nach unten scrolle, soll sich der Balken einblenden, bzw. erscheinen. Wie lässt sich das bewerkstelligen? Ihr habt bestimmt eine Idee!!
Vielen Dank für Eure Tipps!!
Gruß
Stefan
Hallo Stefan, eine solche Frage hatte Bero schon mal ausführlich beantwortet. Schau mal hier im Forum über die Suche. Gruß Martina
Danke für Deine PN. Im Interesse der Community möchte ich Deine Frage aber hier, im Forum beantworten, damit auch andere "Leidensgenossen" ggf. davon profitieren können.
Der Tipp, den Dir @marboe gegeben hatte, bezieht sich auf diesen Thread. Da habe ich detailliert erklärt, wie ein Objekt "fließend" am Browser Fensterrand fixiert werden kann.
Allerdings kann Deine Idee damit nur teilweise umgesetzt werden, weil das Objekt immer sichtbar ist. Du möchtest aber, dass das Objekt erst eingeblendet wird, wenn der Besucher Deiner Site die Seite um einen bestimmten Prozentsatz gescrollt hat.
Klar, dass es auch dafür Lösungen gibt, obwohl es dann schon aufwändiger wird.
Du kanns es z. B. mit den u. a. Codeschnipseln versuchen.
Im Head der Seite legst Du die folgenden Zeilen JS und CSS ab:
-----------------------------
<script src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#scroll_pu {
position: fixed;
left: 0;
top: 0;
display:none;
}
</style>
---------------------------
Im Body derselben Seite platzierst Du dann die u. a. HTML- und JS Anweisungen:
--------------------------
<div id="scroll_pu"><img src="index_htm_files/grafik.jpg" style="width: 2500px; height: 1200px;" ></div>
<script type="text/javascript">
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
if (document.documentElement.scrollTop > 100 || self.pageYOffset > 100) {
$('#scroll_pu').css('display','block');
} else if (document.documentElement.scrollTop < 100 || self.pageYOffset < 100) {
$('#scroll_pu').css('display','none');
}
}
}
</script>
--------------------------
Abhängig davon, was Du als Bild/Grafik anzeigen willst, müssen die o. a. gelb- und blau markierten Einträge angepasst werden.
Bei einer Hintergrundgrafik (z. B. Farbe oder Balken) kann die Ursprungsdatei sehr klein gehalten werden. Bei einem Hintergrundbild (z. B. Foto) sieht das schon anders aus...
Der oben gelb markierte Eintrag referenziert das einzubindende Objekt. Du musst also dafür sorgen, dass nach der Veröffentlichung Deines Projekts, das Objekt auch an der angegebenen Position zu finden ist (im Verzeichnis "index_htm_files" oder im root...). Davon abhängig muss der o. a. Pfad ggf. angepasst werden.
Die oben grün markierten Werte definieren die Scrollposition in Pixeln (von oben) ab der das einzublendende Objekt eingeblendet/ausgeblendet wird.
Da die für das Funktionieren nötige JQ Bibliothek online geladen wird, ist ein Funktionstest nur bei bestehender online Verbindung möglich.
Viel Erfolg
------------------------------------
Edit 11.12.2015 - 13:56h
Auch hier hat der Fehler in der Editor Software des Forums zugeschlagen und (mal wieder) den kompletten Text nach einem "http:" Statement gekillt.
Im ersten JS Script muss das "http:" noch vor dem Doppelslash eingefügt werden, also so:
<script src="http: //code.jquery.com/jquery-latest.js">
Das oben rot markierte Leerzeichen darf nicht übernommen werden. Es dient hier nur der "Irreführung" des Forum Editors, damit er die URL falsch interpretiert und den folgenden Text unangetastet lässt