jQuery möchte aus unerklärlichen Gründen nicht funktionieren

  • JavaScript

Es gibt 21 Antworten in diesem Thema. Der letzte Beitrag () ist von KoolDerGroße.

    Also..
    2 Dinge sind mir aufgefallen..

    1. Dein "header.php" include ist am falschen Platz und hat den Falschen Inhalt!
    Damit das richtig inkludiert wird müsste das 1. Im Body mit require inkludiert werden (Im <head></head> haben HTML-Dom Elemente nichts verloren!!)
    Und zweitens darf dort NUR noch das <header></header> Element bleiben. Die HTML, BODY und STYLE Elemente außen drum müssen weg, damit das funktioniert.

    Das sollte dann ungefähr so aussehen:

    Quellcode

    1. ​
    2. <header>
    3. <div id="slogan">
    4. <p class="noselect">TextTextTextTextTextTextTextTextText</p>
    5. </div>
    7. <nav id="navigation-main">
    8. <ul id="navigation-menu-header" class="noselect">
    9. <div class="navigation-text">
    10. <a href="#"><li>TextTextText <i class="fas fa-exclamation-circle"></i></li></a>
    11. <a href="#" class="tolauncher-section"><li>TextTextText <i class="fas fa-download"></i></li></a>
    12. <a><li>TextTextText <i class="fas fa-ellipsis-h"></i></li></a>
    13. </div>
    14. </ul>
    15. </nav>
    16. </header>

    Das fügst du dann direkt nach dem öffnenden <body> Tag ein...

    2. Das Element in deiner Seite, welches die Scrollbar hat, und quasi Scroll-bar ist ist nicht das HTML oder das BODY Element, sondern dass Element mit der Klasse ".parallax" ..
    Daher musst du bei deiner Funktion als "Ziel"-Element .parallax eintragen (etwa so):

    Quellcode

    1. ​
    2. jQuery.noConflict();
    4. jQuery(document).ready(function(){
    5. jQuery(".parallax").scroll(function() {
    6. if (jQuery(this).scrollTop() >= 50) {
    7. jQuery('#return-to-top').fadeIn(200);
    8. } else {
    9. jQuery('#return-to-top').fadeOut(200);
    10. }
    11. });
    12. jQuery('#return-to-top').click(function() {
    13. jQuery('.parallax').animate({
    14. scrollTop : 0
    15. }, 500);
    16. });
    18. ////////////////////////////////////////
    20. var winheight= parseInt(jQuery(window).scrollTop());
    21. var value = 100;
    22. if (winheight > value) {
    23. jQuery('#launcher-download').css({'z-index':'2'});
    24. }
    25. });


    dann sollte das klappen. der Zweite Teil unter dem Kommentar ist allerdings unnötig, da der Fall so nie mehr eintreten wird (das das Window bereits beim Laden gescrollt ist)..


    Grüße

    Ich bedanke mich schonmal im voraus bei dir, ich schätze deine Hilfe wirklich sehr. Aber ich konnte auch trotz dem zusätzlichen Body und HTML-Tag den Header ohne Probleme nutzen. Das der im Head-Tag inkludiert wird ist auch nicht unbedingt die beste Lösung, weiß ich, aber ich war zu faul das scheinbar bissl zu trennen^^'. Naja, ich bearbeite meinen Code dann so wie du es hier geschrieben hast und hoffe dann, dass es funktioniert.

    Der Code unter dem Kommentar in js soll eigentlich die gescrollte Höhe abfragen und dann darauf reagieren, aber da muss ich das dann schätze ich auch auf den .parallax-Teil umleiten, damit das mit scrollen geht