[ERLEDIGT] FadeIn / FadeOut

[rantanplan2000]

Hallo,

ich habe wohl den typischen, lustigen Anfänger Effekt. Bitte nicht lachen! :)

Ich möchte meine Navigation nach 440px scrolling fixed-top machen. Okay, funktioniert!

Nun dachte ich, lass ich die schön einblenden, sieht ja toll aus! okay ... ja, nein! jetzt blinkt meine navigation! ;-)
Bevor ich weiter experimentiere, wollte ich aber fragen - ob meine theoretische Fehleranalyse richtig ist und wie ich jetzt am besten weiter mache. Erstmal der Blinke-Code:

jQuery(document).ready(function() { // start
    var navOffset = jQuery(".test").offset().top; // prüfe scroll position von nav
    var navOffset2 = jQuery("#stickystart").offset().top; // prüfe scroll position von div


jQuery(window).scroll(function(){

     var scrollPos = jQuery(window).scrollTop();
     var windowWidth = $(window).width();

    // Ab 992px Display und größer    
    if(windowWidth >768)
    {
        

    if (scrollPos > 100) {
    jQuery(".navigation").fadeOut("slow");
    }
    
    
   /* if (scrollPos >= navOffset2) { */
   if (scrollPos > 440) {
    jQuery(".navigation").fadeIn("300");
    jQuery(".navigation").addClass("navbar-fixtop navbarfix");
    jQuery(".navigation").css('background-color', '#ddd');

   } else {
    jQuery(".navigation").removeClass("navbar-fixtop navbarfix");
    jQuery(".navigation").removeAttr("style");
    }

    }

});
}); // end

Erst wollte ich die Navigation nur mit fadeIn bei [ if (scrollPos > 440) { ] einblenden. Das gieng natürlich nicht, da die ja erst ausgeblendet werden muss um eingeblendet zu werden.

So wie ich jetzt habe blinkt die ganze Sache, da es kein richtiges Ende gibt für das fadeOut. Hm ....

Ich denke, daher auch die Frage - ich muss dass "irgendwie" so machen:

if (scrollPos > 100) than fadeOut=true
if (scrollPos > 300) than fadeOut=false ?

oder kann ich einfach bei (scrollPos > 100) eingeben zwischen 100 und 440 ?

Das ist jetzt noch bisschen kompliziert für mich.


also irgendwie so (nur das ist natüprlich falsch)

     if (scrollPos > 110 < 440) {
     fadeoutnow = true   
     } else {
     fadeoutnow = false   
     }
       
       
    if (fadeoutnow == true) {
    jQuery(".navigation").fadeOut("slow");
    }

 

[Tronjer]

Du solltest vorab ein jQuery Tutorial machen, sonst wird das nichts.

Außerdem empfiehlt sich eine iterative Herangehensweise und dazu gehört bsw., dass Bedingungen per console.log() geprüft werden, bevor man ihnen Funktionen übergibt.

if (meineBedingung === true) {
  console.log('Bingo');
} else {
  console.log('Bäh');
}

 

[rantanplan2000]

Hey, danke.
Ja, ich schau grade Tutorials durch. Wollte nur vorab wissen, ob das mit dem "if true" richtig wäre in dem Fall. Aber das scheint ja so zu sein.