Code Javascript qui marche qu'à moitié

Résolu/Fermé
Signaler
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
-
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
-
Bonjour,
Je suis pas un gros fan fan de JavaScript mais parfois il peut faire des miracles. Cependant...
J'ai actuellement un problème des plus étranges... Quand je suis en plein écran avec mon navigateur, le code marche sans soucis. Mais si je réduit la fenêtre, il ne marche plus =( Et pareil pour la version téléphone...
Voici mon code JS :
$(function(){
// On recupere la position du bloc par rapport au haut du site
var menu__scroll = $(".site-container").offset().top;

//Au scroll dans la fenetre on déclenche la fonction
$(window).scroll(function () {
	if ($(this).scrollTop() > menu__scroll) {
			$('.menu__bar').addClass("scroll__menu"); 
		} else {
			$('.menu__bar').removeClass("scroll__menu");
		}
	});
});


et pour le code HTML :
...
</head>
<body>
<header class="header menu__bar" >
.....
</header>
.....

2 réponses

Messages postés
34233
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2021
3 859
Bonjour
Où est le .site-container dans le code html que tu nous montres ?

Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
Au temps pour moi ! Dna sle JS je n'ai pas utilisé ".site-container" mais bien ".menu__bar"
J'ai envoyé une mauvaise version de ma correction (~.~)
c'est bien ".menu__bar" qui est à la place.
Messages postés
34233
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
4 décembre 2021
3 859
Je ne detecte aucun souci dans ce code.....
Essaye ceci
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>TEST</title>
    <meta charset="UTF-8">
    <script src="jquery-3.3.1.min.js"></script>
    <style>
      .header{
          min-height:90px;
          height:90px;
      }
      .treshaute{
          min-height:690px;
          height:690px;
          border: 1px solid black;
      }
      .scroll__menu{
          background-color:red;
      }
    </style>
  </head>
  <body>
    <header class="header menu__bar" >
    .....
    </header>
    <div class="treshaute">
     blabla
     </div>
    
    <script type="text/javascript">
     $( document ).ready(function() {
        console.log( "JQUERY READY !!" );
        
        // On recupere la position du bloc par rapport au haut du site
        var menu__scroll = $(".menu__bar").offset().top;
        console.log("menu__scroll : " + menu__scroll);
        //Au scroll dans la fenetre on déclenche la fonction
        $(window).scroll(function () {
          console.log( "$(window).scrol!" );
          console.log('$(this).scrollTop() = ' + $(this).scrollTop() );
          if ($(this).scrollTop() > menu__scroll) {
              $('.menu__bar').addClass("scroll__menu"); 
            } else {
              $('.menu__bar').removeClass("scroll__menu");
            }
          });
                
    });
    </script>
  </body>
</html>

Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
Mmmh je crois que j'ai compris :(
Ce doit être dû à mon CSS... Mon menu passe en statique quand la fenêtre passe en mode "tablette" (en dessou d'un certain taux de px) et il faut qu'il reste en Fixed non ?
Faut que je refasse tout mon menu en css.
Messages postés
210
Date d'inscription
samedi 28 février 2015
Statut
Membre
Dernière intervention
11 mars 2021
4
C'bien ce que je pensais, mon css qui faisait du caca.
Maintenant j'ai un soucis dans mon menu ;-; il ne veut plus faire son scroll en y =(