Scroll topnav

Bonsoir,

Déjà il te faudrait détecter quand on scroll (donc avec la méthode scroll sur $(document), donc en gros sur la page).
Si on scroll il te faudrait ensuite détecter quand on scroll vers le bas. Donc tu as la méthode scrolltop qui te donne la position actuel du scroll, donc avec ça tu peux faire une condition :

• Si position actuel du scroll est supérieur a 0 (ca veut dire qu'on descend)-
• Changer le css.
• Sinon
• Remettre le CSS a la normal.

Avec si vraiment tu cherches un résultat particulier, par exemple que le changement du CSS se fasse a une certaine position du curseur.
Personnellement je fais mes tests en prenant la valeur de scrolltop en la mettant dans une console.log.
Et là tu peux dire que le changement CSS se fasse a 70, 80 etc.. Selon ton choix et le résultat attendu.
Mais dans le cas du site que tu as pris en exemple, le changement CSS se fait dès le début du scroll et pas a un niveau particulier, donc dans ce cas tu peux utiliser l'exemple du premier paragraphe.
Et un conseil, aides toi de la doc de jQuery elle est particulièrement bien expliqué et les exemples aident beaucoup :D.

Autre petite astuce :
Si tu as beaucoup de CSS a appliqué sur ton élément. Je te conseil de ne pas changer le CSS directement mais d'ajouter une classe CSS a ton élément.

Un dernier truc :
Si toi et l'anglais ça fais 42 tu peux utiliser la doc non officiel en Français.
Mais le mieux reste évidemment la doc officiel ^^.

D'accord, je vais regarder la documentation, un très grand merci à toi pour cette superbe réponse. Très bonne soirée à toi.

Excusez-moi de vous déranger, j'ai essayé comme ça :
<script type="text/javascript">

if($(window).scrollTop() > 0) {
$('div.topnav').css({"background-color":"white"});
}

</script>

mais ça ne semble pas fonctionner..

<script type="text/javascript">

if($(window).scrollTop() > 0) {
   $('div.topnav').css({"background-color":"#fff"});
}

</script>

Nan, pas window, window correspond a la fenêtre de ton navigateur.

En jQuery tu as le choix entre selectionner la fenêtre de ton navigateur, le document HTML, ou juste tout simplement le body (ou une autre balise).
Dans ton cas tu utilises les limites du document HTML. Donc tu devrais plutôt remplasser $(window) par $(document).

Et ça ne fonctionne pas non plus parce que tu n'attend pas que jQuery soit chargé.
Donc le code correct serait plutôt :

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"> <!-- On oublie pas de charger la librairie jQuery !-->
<script type="text/javascript">
$(document).ready(function(){ // On attend que jQuery soit bien chargé
    $(document).scroll(function(){ // On "écoute" quand l'utilisateur scroll
        if($(document).scrollTop() > 0) { //Quand il scroll on lance la condition
            $('.topnav').css("background-color", "#fff"); //On ne met pas directement son code CSS ^^, on défini le paramètre a modifier et sa valeur en les séparant par une virgule ^^
            //Pour une classe en jQuery c'est tout simplement un . pour un id c'est un # et pour un élément basique tel que body on ne met rien :D
        } else { //Si le scroll est a 0
            //On met le CSS de base ici pour revenir à la normal
        }
    });
});

</script>

Ah d'accord, merci beaucoup de m'avoir fait le code.

Au passage, si tu utilises jQuery juste pour ça, fait le plutôt en javascript ça ne sert à rien d'importer une si grosse librairie pour si peu..

D'accord, merci :)