changer div basé sur combien de temps en bas de la page que vous avez fait défiler

Question

J'essaie de changer le texte à l'intérieur d'un div basé sur combien de temps en bas d'une page que vous avez fait défiler. J'ai bricolé avec le scrollTop de jQuery et la taille de document mais ai jusqu'ici échoué pour produire les résultats désirés.

Comment est-ce que j'obtiendrais la position d'un élément sur la page et ensuite j'obtiendrais que jQuery fasse quelque chose une fois que vous avez fait défiler vers cette position d'éléments?

L'aide est très appréciée!

Answer 1

Il y avait une question sur Stackoverflow qui demandait quelque chose de similaire et j'ai donné un petit exemple pour illustrer comment accomplir ceci. Je ne peux pas trouver la question maintenant, mais here is the example. Dans cet exemple, il y a un div qui est affiché jusqu'à ce que vous faites défiler jusqu'à un certain élément dans la page à quel point le div est caché. Vous pouvez changer cela pour réaliser ce que vous voulez, car l'idée est la même. Voici le code modifié pour ce dont vous avez besoin:

$(document).ready(function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    } 

    var myelement = $('#formcontainer'); // the element to act on if viewable 
    $(window).scroll(function() { 
     if(isScrolledIntoView(myelement)) { 
      // do something when element is scrolled to and viewable 
     } else { 
      // do something when element is not viewable 
     } 
    }); 
}); 

Answer 2

bon vieux ppk from quirksmode.org peut vous montrer comment trouver la position d'un élément: « Ce script trouve la position réelle, donc si vous redimensionnez la page et exécutez le script encore une fois, il pointe vers la nouvelle position correcte de l'élément. "