Je souhaite détecter quel élément est visible à l’écran lors du défilement vers le haut / le bas. Je dois définir comme élément de menu actif dans le menu qui cible cet élément.
// must have a page class $('.page').each(function(){ $positionData[$(this).attr('id')] = $(this).offset().top; }); $(document).scroll(function(){ var $position = $(this).scrollTop(); if($position > $height && !$body.hasClass('scrolled')) { $body.addClass('scrolled'); //detech the scroll is between an element offset } else if($position < $height) { $body.removeClass('scrolled'); } });
Une idée?
Vous pouvez utiliser jquery plugin inview ( github ) pour le faire.
$('.scrollWatch').bind('inview', function (event, visible) { if (visible) { // do something here $(this).addClass('scrolled'); $(this).text('mom! I\'m here.'); } else { // do something here with invisible $(this).removeClass('scrolled'); $(this).text('1'); } });
J’ai créé une démo jsfiddle pour vous, utilisez s’il vous plaît DevTools pour voir quels changements ont été apportés en HTML.
Pour les utilisateurs de Bootstrap ;
Il existe déjà un composant nommé Scrollspy.
Scrollspy
Comment utiliser?
1: Ajouter un positionnement relatif au corps.
body { position: relative; }
2: Ajoutez des atsortingbuts data-spy = “scroll” et data-target = “” à votre corps. (data-target doit cibler votre menu)
3: Définissez votre menu. Ne pas append de la classe de navigation à votre élément ul / ol.
4: Vérifiez que vos éléments cibles sur chaque élément doivent avoir un atsortingbut id identique à celui de vos cibles de liens.