Hallo zusammen,
ich habe mir ein Menü erstellt. Beim Scrollen wird im Menü ab einem bestimmten Punkt ein Bild eingeblendet. Dies funktioniert auch so weit.
Nun habe ich dazu allerdings 3 Probleme bzw. Fragen.
1. Wenn ich die Seite neu lade, ist das Bild automatisch eingeblendet. Dies soll allerdings erst beim Scrollen passieren und nicht bereits davor. Wie kann ich das beheben?
2. Die JavaScript-Animation soll nur am PC bzw. Tablet (screen-md-up) erfolgen und nicht am Handy. Wie kann ich das verwirklichen?
3. Momentan habe ich in meinem Code einfach nur eine Zahl (250 siehe Code) angegeben, ab der die Animation erfolgen soll. Wie kann ich hierfür eine PHP-Klasse angeben? Ich möchte, dass die Animation erst erfolgt, wenn eine bestimmte PHP-Klasse erreicht ist, da mir gesagt wurde, dass meine Lösung programmiertechnisch sehr unschön ist.
Mein Code:
<script>
window.onscroll = function() {scrollFunction()};
var element = document.getElementById("pageHeaderFacade");
if(window.outerWidth<769){
document.getElementById("upperlogo").hidden = true;
}
function scrollFunction() {
if(window.outerWidth>=769){
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
document.getElementById("upperlogo").hidden = false;
} else {
document.getElementById("upperlogo").hidden = true;
}
}
}
</script>
Alles anzeigen
<div class="logocool" id = "upperlogo">
<img src="https://teamforum.eu/ws/images/styleLogo-e38c8ee46e8cf41b83497ce240d4503b1dc86a7e.png" alt="" height="55px" width="55px">
</div>
Ich bitte um Hilfe, da ich nach stundenlangem Rumprobieren leider keine Lösung gefunden habe.
Vielen Dank im Voraus und noch einen schönen Abend.
Liebe Grüße
Jonathan C.