Wie CSS in Javascript bekommen richtig funktioniert

Question

ich mit einigen javascript einige Probleme habe ich verwende.

Die Idee ist, den Hintergrund meines Menüs transparent, mit weißen Links zu machen. Wenn beim Scrollen 100 angezeigt wird, ändert sich der Hintergrund von weiß zu # 222, der Text ändert sich von weiß zu # 222, und der Hover-Status zu Textlinks ändert sich wieder von weiß zu weiß.

//Fade in header 
jQuery(window).on("scroll", function() { 
if (jQuery(this).scrollTop() > 100) { 
    jQuery("body.home header, body.page header").css("background-color","#fff"); 
     jQuery("body.home header, body.page header").css("box-shadow","0px 2px 4px -2px rgba(0, 0, 0, 0.15)"); 
     jQuery("body.home header, body.page header").css("transition","1s"); 
      jQuery(".nav-menu ul li a").css("color","#222"); 
      jQuery(".nav-menu ul li a:hover").css("color","#fff"); 
} 

else { 
    jQuery("body.home header, body.page header").css("background-color","transparent"); 
    jQuery("body.home .nav-menu ul li a, body.page .nav-menu ul li a").css("color","#fff"); 

      jQuery("body.home header, body.page header").css("box-shadow","none"); 


} 
}); 

Es funktioniert nicht wie erwartet.

Zum einen kann der weiße Hintergrund gesehen werden, bis irgendeine Form von Scroll-Ereignis eintritt. Dann ist es zu transparent ändert, dann wieder fest nach 100.

Das zweite Problem ist, dass in dem veränderten Zustand mit dem festen weißen Hintergrund, der Ankertext nicht Farbe auf schweben ändert.

Der Effekt kann nicht auf my blog Arbeit gesehen werden, die es leichter zu verbinden ist, als zu widersetzen, zu beschreiben versuchen. Diese

Answer 1

ist eine verdammt viel Code für nicht viel Arbeit! Fügen Sie einfach eine Klasse zu scroll hinzu, es wäre viel einfacher.

z.

$(window).scroll(function() {  
     var scroll = $(window).scrollTop(); 
     if (scroll >= 100) { 
      $("header").addClass("white"); 
     } else { 
      $("header").removeClass("white"); 
     } 

    }); 

.white { 
background:#fff; 
} 
.white a { 
color:#222; 
} 

Answer 2

Wie @GavinThomas sagte, sollen Sie wirklich eine CSS-Klasse verwenden, um den „transparent“ Zustand zu setzen, und nur jQuery verwenden, um die Klasse ein/auszuschalten.

Nehmen wir an, die Klasse white macht den Hintergrund weiß, und standardmäßig ist der Header transparent, so sollte Ihr CSS aussehen. Natürlich müssen Sie alle Stile hinzufügen, die Sie bereits haben.

header { 
    background-color: transparent; 
    transition: 1s; 
} 

.nav-menu ul li a, body.page .nav-menu ul li a { 
    color: #fff; 
} 

header.white { 
    background-color: #fff; 
    box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.15); 
} 

header.white .nav-menu ul li a{ 
    color: #222; 
} 

header.white .nav-menu ul li a:hover { 
    color: #fff; 
} 

Und wie @GavinThomas sagte

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll >= 100) { 
     $("header").addClass("white"); 
    } else { 
     $("header").removeClass("white"); 
    } 

});