changer de div en fonction de la distance parcourue dans la page

Question

J'essaie de modifier le texte à l'intérieur d'une div en fonction de la profondeur de la page que vous avez parcourue. J’ai bricolé le scrollTop et la hauteur du document de jQuery, mais j’ai jusqu’à présent omis de produire les résultats souhaités.

Comment puis-je obtenir la position d'un élément sur la page puis que jQuery fasse quelque chose une fois que vous avez fait défiler jusqu'à la position de cet élément?

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 fourni un petit exemple pour illustrer la procédure à suivre. Je ne trouve pas la question pour le moment, mais voici l'exemple . Dans cet exemple, un div est affiché jusqu'à ce que vous passiez à un certain élément de la page, auquel point le div est masqué. Vous pouvez changer cela pour obtenir 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

Le bon vieux ppk de quirksmode.org peut vous montrer comment trouver le poste. d’un élément: "Ce script trouve la position réelle. Par conséquent, si vous redimensionnez la page et exécutez le script à nouveau, il pointe sur la nouvelle position correcte de l’élément."