mettre en évidence le menu sur le défilement (si atteindre div)
je veux mettre en évidence le point de menu si la div est un défilement //ou cliqué.
http://jsfiddle.net/WeboGraph/vu6hN/2/ (c'est un exemple de ce que je veux)
mon code:
(JS)
$(document).ready(function(){
$('nav a').on('click', function(event) {
$(this).parent().find('a').removeClass('active_underlined');
$(this).addClass('active_underlined');
});
$(window).on('scroll', function() {
$('.target').each(function() {
if($(window).scrollTop() >= $(this).position().top) {
var id = $(this).attr('id');
$('nav a').removeClass('active_underlined');
$('nav a[href=#'+ id +']').addClass('active_underlined');
}
});
});
});
mon html (nav)
<nav>
<div id="cssmenu">
<ul id="horizontalmenu" class="underlinemenu">
<li><a data-scroll href="#fdesigns" class="active_underlined">FDesigns</a> </li>
<li><a data-scroll href="#skills">skills</a> </li>
<li><a data-scroll href="#workflow">WORKFLOW</a> </li>
<li><a data-scroll href="#portfolio">Portfolio</a> </li>
<li><a data-scroll href="#about">About</a> </li>
<li><a data-scroll href="#kontakt">Kontakt</a> </li>
</ul>
</div>
</nav>
mon style en cascade (css)
.active_underlined a {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
a.active_underlined {
color: #fff;
border-bottom: 2px solid #ebebeb;
}
voici un lien vers le projet: http://www.f-designs.de/test_onesite
source d'informationauteur fab
Vous devez vous connecter pour publier un commentaire.
Utilisation
$(this).offset().top
au lieu de$(this).position().top
Violon
Comme
.position()
obtenir les coordonnées actuelles du premier élément de l'ensemble des éléments qui correspondent, par rapport à l'offset parent alors que.offset()
obtenir les coordonnées actuelles du premier élément de l'ensemble des éléments qui correspondent, par rapport au document.Dans votre site web, toutes les DIV avec la classe à l'intérieur de
.target
sont à l'intérieur, par conséquent, tous les éléments de la classe.target
sont de retour la valeur.position().top
égal à 0.Diminution de la valeur de décalage, de sorte que le
class
changer lorsque l'élément atteindre le menu en faisant de laif
condition comme ceci:Trouvé cela en 2018 et a couru dans une erreur de syntaxe en essayant de reproduire avec une version plus récente de jquery (+1.0). Dans la dernière ligne
$('nav a[href=#'+ id +']')
l'attribut n'est pas correctement échappé et qu'il doit être comme$('nav a[href="#'+ id +'"]')
(note ajoutée "").Voici où j'ai trouvé cette https://api.jquery.com/attribute-contains-selector/