J'ai un site réactif où j'utilise un JavaScript pour créer une barre latérale collante.
J'utilise également les requêtes de média pour passer d'une disposition multi-colonnes à une disposition à colonne à colonne lorsque la taille du navigateur est la suivante. Moins de 768px.
Je dois déterminer comment désactiver le script de menu collant dans la disposition à colonne unique. Essentiellement, j'ai besoin de quelque chose comme une requête médiatique pour l'instruction de script.
Ceci est le code que j'utilise pour activer le script: est Il y a quelque chose que je peux ajouter à celui-ci pour ne pas avoir déclencheur si la fenêtre est de 768px large ou plus large? Edit: Je recherche une solution qui fonctionnera si l'utilisateur redimensionne la fenêtre à la volée.
3 Réponses :
Essayez ceci.
@ Mдγγ Дll Cela fonctionne en fonction de la taille de la fenêtre en charge de la page; Existe-t-il un moyen de le faire fonctionner si l'utilisateur redimensionne la page après sa charge?
@ MДγγбдll - Je pensais que OP ne nécessite que lorsque la largeur doit être 768 mais YEST > = devrait être meilleur.
IME Il est préférable de débattre du gestionnaire de redimensionnement car cet événement peut être viré un lot pendant que la fenêtre est redimensionnée. J'aime ce plug-in jquery: benalman.com/code/projects/jquery -Trottle-debond / Exemples / ...
@Shankarsangoli merci. Le code mis à jour fonctionne si la fenêtre commence petite et est agrandie au-delà de 768, mais pas si la fenêtre commence grandement et est réduite en dessous de 768.
Si la largeur de la fenêtre est réduite en dessous de 768, la condition si échouera et ne fera rien. Si vous voulez faire quelque chose d'autre dans ce cas, ayez un bloc el / code> et écrivez le code requis.
Essayez ce code:
var height = $(window).height(); //I'm assuming you mean height, you can try .width() if yo u need it
if (height < 768) {
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
Vérifiez cela:
var targetWidth = 768;
if ( $(window).width() >= targetWidth) {
//Add your javascript for screens wider than or equal to 768 here
jQuery('#info').containedStickyScroll({
duration: 0,
unstick: false
});
}
else {
//Add your javascript for screens smaller than 768 here
console.log(`am less than ${targetWidth}`)
}
Également connexe: Stackoverflow.com/questions/4811238/...