Code Javascript qui marche qu'à moitié
Résolu
Shuta
Messages postés
210
Date d'inscription
Statut
Membre
Dernière intervention
-
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
Shuta Messages postés 210 Date d'inscription Statut Membre Dernière intervention -
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 :
et pour le code HTML :
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:
- Code Javascript qui marche qu'à moitié
- Code ascii - Guide
- Moitié a4 - Guide
- Comment déverrouiller un téléphone quand on a oublié le code - Guide
- Code puk bloqué - Guide
- Code activation windows 10 - Guide
2 réponses
Je ne detecte aucun souci dans ce code.....
Essaye ceci
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>
J'ai envoyé une mauvaise version de ma correction (~.~)
c'est bien ".menu__bar" qui est à la place.