JQuery Hover-Methode innerhalb einer Scroll-Methode

Question

Ich versuche, die Navbar zu imitieren, die auf this site gesehen wird, habe aber einige Probleme mit der JQuery. Ich verwende eine if-Anweisung für die Bildlaufformatierung und dann eine Hover-Methode am Ende der if-Anweisung.

$(function() { 
$(window).scroll(function() { 
var scroll = $(window).scrollTop(); 
if (scroll >= 100) { 
    $("nav").css("background-color","white"); 
    $("nav").css("height","75px"); 
    $(".navbar-default .navbar-brand").css("color","black"); 
    $(".navbar-default .navbar-nav > li > a").css("color","black"); 
} 
else { 
    $("nav").css('background-color','rgba(0, 0, 0, 0)'); 
    $(".navbar-default .navbar-brand").css("color","white"); 
    $(".navbar-default .navbar-nav > li > a").css("color","white"); 
    $("nav").css("height","125px"); 
    $("nav").hover(function(){ 
    $(this).css("background-color", "white"); 
    }, function(){ 
    $(this).css("background-color", "rgba(0, 0, 0, 0)"); 
    }); 
} 
}); 
}); 

Das Problem mit dem aktuellen Code, den ich habe, ist, dass die Hover-Methode, um die navbar verändert, nachdem ich transparent sein scrollen, wenn Ich mag würde es nicht ändern und weiß bleiben.

Answer 1

Sie verwenden zu viel JavaScript. Sie sollten CSS Ihre Elemente stylen lassen. Anstatt mehrere Male .css zu verwenden, sollten Sie einfach eine Klasse zum nav hinzufügen und dann basierend darauf stylen.

Der .hover Teil kann auch in CSS erfolgen. Daumenregel, Sie sollten niemals Event-Handler in einem anderen Event-Handler anhängen; Es gibt immer einen besseren Weg.

Am Ende sollten Sie etwas wie dieses:

Haftungsausschluss, habe ich nicht Stil wie Sie haben, noch verwendet, um Ihre HTML, so sollten Sie diesen Code auf Ihre Bedürfnisse anzupassen.

$(function() { 
 
    var $window = $(window).scroll(function() { 
 
    \t var scroll = $window.scrollTop(); 
 
     $("nav").toggleClass("sticked", scroll >= 100); 
 
    }); 
 
});

body{ 
 
    height : 300vh; 
 
} 
 

 
nav{ 
 
    position : fixed; 
 
    top : 0; 
 
    left : 0; 
 
    width : 100%; 
 
    height : 125px; 
 
    background : transparent; 
 
    } 
 
    
 
    nav .text{ 
 
    color : black; 
 
    } 
 
    
 
    nav:hover{ 
 
    background: red; 
 
    } 
 
    
 
    nav:hover .text{ 
 
     color : white; 
 
    } 
 
    
 
    nav.sticked{ 
 
    background : red; 
 
    height : 75px; 
 
    } 
 
    
 
    nav.sticked .text{ 
 
     color : white; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav> 
 
<span class="text">text here</span> 
 
</nav>