Comment détecter quel élément est au centre de l’écran avec la position de défilement?

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.