jQuery : ajouter une classe css à l'élément de menu basé sur navigateur scroller position
J'ai un menu:
<ul class="menu-bottom">
<li id="m1" class="active"><a id="1" href="#"><span>Link 1</span></a></li>
<li id="m2"><a id="2" href="#"><span>Link 2</span></a></li>
<li id="m3"><a id="3" href="#"><span>Link 3</span></a></li>
</ul>
Je veux que la fonction de navigateur barre de défilement, la position, la "active" classe va le corriger < li > élément.
C'est comment je le vois :
if ($(document).height() == 500) {
$('#m1').parent().addClass('active').
siblings().removeClass('active');
}
if ($(document).height() == 1000) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}
if ($(document).height() == 1500) {
$('#m2').parent().addClass('active').
siblings().removeClass('active');
}
Je ne suis pas très familier avec jQuery Dimensions des propriétés si ce code n'a pas beaucoup de sens, mais j'espère que vous obtenez l'idée.
Si quelqu'un pouvait me dire comment faire ce travail, ce serait vraiment cool.
Merci 🙂
OriginalL'auteur b0nd | 2010-04-24
Vous devez vous connecter pour publier un commentaire.
Ce n'est pas tout à fait clair ce que c'est que vous essayez de faire, mais je vais prendre un coup de couteau. Pour obtenir le montant de la fenêtre défile verticalement, vous aurez envie d'utiliser du jQuery
scrollTop()
fonction. Leheight()
fonction vous donne de la hauteur en pixels de l'élément sur lequel il est appelé, afin de ne pas être très utile, si la valeur de défilement est ce que vous voulez. Quelque chose comme cela pourrait être plus proche de ce que vous avez besoin de:Même si ce qui précède n'est pas sur la bonne piste, il ya un couple d'autres choses à noter que pourrait aider. Les lignes comme
$('#m1').parent().addClass('active').siblings().removeClass('active');
sont susceptibles de ne pas faire ce que vous attendez. Plutôt que d'ajouter les "actifs" de la classe de la li et puis la retirer de la li frères et sœurs, c'est en fait l'ajout de la classe à la mère de l'ul et de l'enlever de l'ul frères et sœurs. Essayez de supprimer.parent()
de chaque ligne et qui devrait fonctionner.Aussi, puisque vous êtes en utilisant == dans votre si les conditions, la classe va être ajoutés uniquement lorsque la valeur est exactement 500 ou 1000 etc. ce dont je doute est ce que vous souhaitez. C'est pourquoi, dans le code ci-dessus je l'ai changé pour être <= pour les instructions conditionnelles.
Espère que cette aide.
Pas de problème. Content d'avoir pu aider.
Wow! Merci Bryan, cela a résolu mon problème de trop 🙂
Belle solution !
Je pense que vous êtes absent ); sur votre dernière ligne... Merci!
OriginalL'auteur Bryan