J'essaie de cacher une image après que je fais défiler la page. Lorsque vous faites défiler mon mais cela ne fonctionne pas. Aucun conseil? Thx. en-tête obtient une classe Fl-theme-Builder-Header-Scrollé . Mon image div a une classe cache-image et je veux ajouter une classe image-off lorsque le fl-thème-Builder-en-tête - défilé La classe apparaît dans l'en-tête .
C'est ce que j'ai:
5 Réponses :
Votre code ne fonctionne qu'une fois après le document prêt, dès que la page se charge. Donc, si l'en-tête ne dispose pas de la classe FL-theme-Builder-Builder-Header - Schrouler la classe et n'est ajouté que plus tard, votre code ne fonctionnera pas à nouveau.
Vous avez besoin d'un observateur de mutation. Vérifiez ce thread: Déclencheur d'événement sur un changement de classe
Vous pouvez également faire comme @brewal, mettez l'évaluation du code sur l'événement de défilement. Bien que vous soyez prudent, vous n'exécutez pas le code chaque fois que l'événement de défilement est déclenché car il peut ralentir la performance de votre site Web, spécialement sur les appareils mobiles.
Essayez quelque chose comme ça.
Produire votre code dans un bac à sable comme CodePen.io ou Jsfiddle pour que je puisse jeter un oeil à la raison pour laquelle cela ne fonctionnerait pas.
Comme indiqué dans les commentaires, je pense que la meilleure approche serait de déterminer où la classe Cependant, si vous voulez vraiment mettre la logique dans une zone séparée, vous pouvez le faire comme ceci: P> Theme-Builder-Builder-Builder-Builder-Builder est déjà contrôlée. $(document).ready(function () {
$(window).scroll(function () { //attach to window scroll event
if ($('header').hasClass('fl-theme-builder-header-scrolled') && !$('.hiding-image').hasClass('image-off')) {
$('.hiding-image').addClass('image-off'); //add class only if it does not already exist;
} else {
if ($('.hiding-image').hasClass('image-off')) {
$('.hiding-image').removeClass('image-off'); //remove class
}
}
});
});
Vérifier la condition comme ceci:
J'ai finalement réussi à faire fonctionner cela:
(function($){
$(function(){
var headerThemer = $( '.fl-builder-content[data-type=header]' ).eq(0);
$(window).on( 'scroll.fl-theme-builder-header-scrolled', function(){
if ( headerThemer.hasClass('fl-theme-builder-header-scrolled') ) {
$('.hiding-image').hide();
}
else {
$('.hiding-image').show();
}
});
})
})(jQuery);
Vous devriez exécuter votre déclaration IF sur l'événement de défilement
Qu'est-ce que l'ajout du
fl-thème-Builder-en-tête-en-tête - Classe ?Pour ajouter à ce que @erikphilipip a dit, je pense que la meilleure approche consiste à placer votre logique où le
fl-thème-Builder-Header-Enford-Scrollé est basculé