Code Javascript qui marche qu'à moitié

Résolu/Fermé
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - 2 sept. 2018 à 23:13
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 - 3 sept. 2018 à 11:35
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>
.....
A voir également:

2 réponses

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
3 sept. 2018 à 00:38
Bonjour
Où est le .site-container dans le code html que tu nous montres ?

0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
3 sept. 2018 à 00:46
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.
0
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
3 sept. 2018 à 09:07
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>

0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
3 sept. 2018 à 10:06
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.
0
Shuta Messages postés 210 Date d'inscription samedi 28 février 2015 Statut Membre Dernière intervention 11 mars 2021 3
3 sept. 2018 à 11:35
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 =(
0