Méthode JQuery Hover dans une méthode de défilement

Question

Je tente d'imiter la barre de navigation visible sur this site, mais j'ai des problèmes avec le JQuery. J'utilise une instruction if pour la mise en forme du défilement, puis j'insère une méthode hover au bas de l'instruction if.

$(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)"); 
    }); 
} 
}); 
}); 

Le problème avec le code actuel que j'ai est que la méthode de vol stationnaire change la barre de navigation après que je défilement pour être transparent quand je le voudrais de ne pas changer et rester blanc.

Answer 1

Vous utilisez trop de JavaScript. Vous devriez laisser le style CSS à vos éléments. Au lieu d'utiliser plusieurs fois .css, vous devez simplement ajouter une classe au nav puis un style basé sur cela. La partie .hover peut également être réalisée en CSS. Règle générale, vous ne devez jamais joindre un gestionnaire d'événements à l'intérieur d'un autre gestionnaire d'événements; il y a toujours un meilleur moyen.

En fin de compte, vous devriez avoir quelque chose comme ceci:

Avertissement, je ne l'ai pas le style comme vous l'avez fait, ni utilisé votre HTML, vous devez donc adapter ce code à vos besoins.

$(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>