Comment puis-je faire pâlir un div sur la page de défilement?

Voici le jsfiddle: http://jsfiddle.net/NKgG9/

Je suis fondamentalement de ceux qui veulent les boîtes de rose à être sur le spectacle sur le chargement de la page comme d'habitude, mais dès que l'utilisateur fait défiler la page, je veux qu'ils s'estompent et disparaissent. Lorsque l'utilisateur fait défiler en arrière jusqu'à leur position ou le haut de la fenêtre du navigateur, je veux ces boîtes de rose à l'évanouissement. Je suis inutile avec JS donc bon un peu d'aide sur la façon de le faire.

Toute aide appréciée.

Voulez-vous fadeIn/Out pour le niveau en fonction de la valeur de défilement, ou tout simplement pour appliquer l'effet dès que le défilement est-il détecté?
Idéalement, fade out lorsque le défilement est détecté, alors fondu en arrière lorsque l'utilisateur revient en haut de la fenêtre du navigateur

OriginalL'auteur egr103 | 2012-02-24

  1. 13

    Exemple très simple: http://jsfiddle.net/a4FM9/2/

    var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​
    C'est génial. Bravo pour ce @Joyeux! J'ai remarqué cependant qu'il existe un problème où les divs clignoter lorsque vous essayez de défilement, lorsque vous êtes tout en haut de la page. Est-il un moyen d'arrêter cela?
    remplacer if($(window).scrollTop() == 0) par if($(window).scrollTop() < 10), par exemple. 10 pixels ne jouera pas un rôle très important, mais permettra d'éviter de tels effets. jsfiddle.net/a4FM9/1
    Ou regardez ici jsfiddle.net/a4FM9/2
    Il y a un léger problème, par contre, en ce que lorsque vous êtes à mi-chemin en bas de la page dans Firefox et que vous actualisez la page, les deux divs montrer de nouveau. Comment puis-je résoudre ce problème?
    ajouter $(window).trigger('scroll'); dans $(document).ready .. fonction par exemple.

    OriginalL'auteur Cheery

  2. 4

    Comme ça? http://jsfiddle.net/NKgG9/6/

    $(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

    L'idée de base: s'abonner à l'événement scroll. Si la position de défilement se déplace au-delà d'un certain point, commencer le fondu de sortie et de même si l'utilisateur fait défiler jusqu'fondu. Quelques détails importants: suivre si vous êtes déjà à la décoloration in/out (variable montré) et l'arrêt de toute fade si vous commencez un nouveau fondu.

    C'est génial acclamations André!
    Cela a le même problème que la première solution, en ce que lorsque vous êtes à mi-chemin en bas de la page dans Firefox et que vous actualisez la page, les deux divs montrer de nouveau. Comment puis-je résoudre ce problème?
    J'ai mis à jour la réponse. Si je ne pouvais pas recréer le problème dans Firefox, ce qui devrait l'arrêter: si la fenêtre est déjà initialement défile, cacher les éléments.
    Non, malheureusement cela ne fonctionne pas non plus.En fait, le fondu de sortie ne semble pas être un travail, soit il vient se cache-il brusquement, sans effet, cependant, il n'est fondu dans le nouveau. Bizarre.
    Aussi j'ai remarqué qu'il chevauche le contenu sous l'image, est-il un moyen de contrôler qu'il n'affiche plus l'image?

    OriginalL'auteur Andre Loker

  3. 0

    Grâce - celui-ci m'a vraiment aidé.

    Au départ je voulais une solution comme le "Faites défiler pour Plus d'" et a réussi à le faire avec http://jsfiddle.net/a4FM9/12/ - c'est peut-être utile pour tout le monde.

    OriginalL'auteur Leander