Jquery/Javascript trouver premier élément visible après défilement

je code comme ci-dessous:Jquery/Javascript trouver premier élément visible après défilement

<div id="container"> 
<div class="item" id="1">blah blah</div> 
<div class="item" id="2">blah blah 2</div> 
</div>

Mais en réalité, il y a beaucoup, beaucoup de class = 'item'.

Fondamentalement, comme l'utilisateur fait défiler cette longue liste d'éléments, je veux changer le style de l'actuel visible (comme google reader!). J'ai cherché une solution dans jquery ou javascript, mais je n'arrive pas à en trouver un. Quelqu'un a des idées?

Merci

Mark

Source

2010-02-09 Mark Milford

Si vos éléments ne sont pas la même hauteur, vous pouvez parcourir eux sur parchemin:

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    $('.item').removeClass('top').each(function() { 
     if ($(this).offset().top > cutoff) { 
      $(this).addClass('top'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
});

Si cela est trop lent, vous pouvez mettre en cache le $ ('article.) Offset(). dans un tableau, plutôt que d'appeler offset() à chaque fois.

Source

2010-02-09 18:00:37 kevingessner

Merci, fonctionne bien avec un tweak mineur, en ajoutant un certain nombre de 25 qu'ils sont sélectionnés juste avant qu'ils n'atteignent le haut de la fenêtre, sinon celui sélectionné est à moitié défilé avant que le suivant ne soit sélectionné –

$ ('. item'). offset() ne fonctionnera pas car - offset obtiendra le coordonnées actuelles du premier élément de l'ensemble des éléments appariés, par rapport au document. –

-4

Vous pouvez créer votre propre barre de défilement en utilisant javascript.

Ce n'est pas une idée très pratique mais vous pouvez essayer.

Et placez le lien vers l'image le décrivant mieux. Ce serait très utilisable.

Source

2010-02-09 17:12:08 oneat

Ajouter un exemple d'implémentation, ou au moins un paradigme ou une technologie d'implémentation, serait utile. Décrivez mieux, par exemple: que voulez-vous dire par scroller, quelle bibliothèque/plugin utiliseriez-vous, pourquoi ne le considéreriez-vous pas comme une idée pratique, etc. –

Voici une autre idée, basée sur les fonctions intégrées de javascipt.

var range = document.caretRangeFromPoint(0,0); // screen coordinates of upper-left corner of a scolled area (in this case screen itself) 
var element = range.startContainer.parentNode; // this an upper onscreen element

Ce bit de code n'est pas un produit prêt à l'emploi - il est juste un exemple, qui ne fonctionne que dans les navigateurs WebKit. Si vous souhaitez l'utiliser, vous devez utiliser google pour les équivalents inter-navigateurs de caretRangeFromPoint()

Source

2013-10-03 11:22:51 Stanislav

Répondre

Questions connexes