JQuery fondu dans une div lorsque l'utilisateur fait défiler vers cette div

Un élément <div class=""> va s'estomper lorsque l'utilisateur de faire défiler à l'div.

J'ai trouvé une solution en utilisant un plugin jQuery et une autre solution pour vérifier si la div est visible sur la page. Elle fonctionne.

Cependant, dès que l'utilisateur fait défiler vers le haut de la div, il s'estompe trop rapidement pour que l'utilisateur n'a pas la chance de voir la div fondu. Comment puis-je faire la div fondu UNIQUEMENT si l'utilisateur fait défiler vers le bas de la div, de sorte que l'utilisateur peut voir un joli effet de fondu pour l'ensemble de la div?

source d'informationauteur ForeverNights

  1. 9

    vous avez mentionné que vous avez utilisé un plugin jQuery, je ne sais pas si vous avez essayé jQuery waypoints plugin, vous pouvez le faire en utilisant ce plugin facilement par le passage d'une option de décalage pour le plugin comme suit:

    //by default your element will be hidden
$('div').hide();
//call waypoint plugin
$('div').waypoint(function(event, direction) {
    //do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       //The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

    décalage : Détermine à quelle distance du haut de l'élément doit être à partir du haut de la fenêtre du navigateur pour déclencher un waypoint. Il peut être un nombre, qui est considéré comme un nombre de pixels, une chaîne de caractères représentant un pourcentage de la fenêtre d'affichage de la hauteur, ou une fonction qui retourne un nombre de pixels.

    ainsi, sur l'exemple précédent, votre div ne se fanera pas, sauf si c'est dans le milieu de la page.

  2. 11

    Ce code javascript est peut-être similaire à ce que vous utilisez actuellement, la seule différence étant le décalage utilisé, qui est tout simplement l'élément cible de l' offset().top() + l'élément height(). Le code de démonstration fondus dans plusieurs <li> éléments comme le fond de la éléments.

    tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

    Démo: jsfiddle.net/Marcel/BP6rq (plein écran)