Div basé sur l'opacité sur la position de la barre de défilement

Trouver un exemple de comment fade out un div lorsque la barre de défilement atteint une certaine position ici. Mais ce n'est pas une commande de gaz souple de type fondu. Voici le code de ce jsfiddle:

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});

Je veux l'opacité pourcentage de refléter la position de la barre de défilement. Par exemple, lorsque la barre de défilement est au plus haut poste, la div opacité est de 100%. Quand je scroll vers le bas 35px je veux l'opacité de la div à s'estomper jusqu'à 0%

Peut-être une technique pourrait être lors de la div A est à 35px de haut, div B = 100% d'opacité. Lors de la div A est 0px de haut, div B = 0% d'opacité. Et ont en douceur fade à toutes les étapes entre les deux.

Merci!

Mise à JOUR: Merci pour toute l'aide que la plupart d'entre eux fonctionnent assez bien, mais j'ai vraiment besoin de travailler à l'intérieur de la 35px gamme. J'ai donc créé une nouvelle qui va faire très clairement la façon dont il devrait fonctionner.
http://jsfiddle.net/J8XaX/1/

Mise à JOUR 2: les appareils mobiles: j'ai essayé sur mon iPhone et le fondu ne fonctionne pas en douceur. La façon dont cela fonctionne est, si vous faites glisser à mi-chemin et relâchez votre doigt, puis l'opacité va vers le bas. Mais si vous essayez de passer en douceur, il va à partir de 100% d'opacité directement à 0% d'opacité. Vous demandez-vous si il existe un moyen de résoudre ce problème??

Merci!!

OriginalL'auteur user433575 | 2012-04-18

22

essayer quelque chose comme
```
var divs = $('.social, .title'),
    limit = 35;  /* scrolltop value when opacity should be 0 */

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   /* avoid unnecessary call to jQuery function */
   if (st <= limit) {
      divs.css({ 'opacity' : (1 - st/limit) });
   }
});
```
quand scrolltop atteint 35px ensuite l'opacité de divs est 1 - 35/35 = 0

exemple de violon: http://jsfiddle.net/wSkmL/1/

votre violon mise à jour: http://jsfiddle.net/J8XaX/2/ (j'ai changé de 35 à 130px pour obtenir l'effet que vous avez écrit dans l'orange div)

Il a essayé et n'a pas de travail, mais vous avez compris le concept dont j'ai besoin. Défilement 35px devrait faire l'div fade out. J'ai créé un nouveau violon, peut-être lui donner un tourbillon?
Une simple erreur de frappe. J'ai inséré un supplément de ) voir ma mise à jour
Génial merci beaucoup, ma mise à jour de violon fonctionne parfaitement!

OriginalL'auteur fcalderan
7
```
var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
   divs.css('opacity', 1 - percent);
});
```
$(document).height() - $(window).height(): la zone de défilement

$(document).scrollTop(): la position de défilement actuelle

percent: la position de défilement actuelle en %

divs.css('opacity', 1 - percent);: définit l'opacité de la divs

Voir aussi cet exemple.

Merci, ça fonctionne très lisse, mais j'en ai besoin pour travailler au sein d'une 35px limite. Veuillez voir mon nouvel exemple. Apprécions l'aide!

OriginalL'auteur scessor

var divs = $('.social, .title');
$(window).scroll(function(){
    var fadeval = 1 - ($(window).scrollTop()) / ($(window).height());       
    divs.css({opacity: fadeval});
});

Violon démo

edit: wow, donc beaucoup de réponse à me battre alors que j'ai été poster

edit: 2

    var divs = $('.fademe');
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also
$(window).scroll(function(){

    var percent = $(document).scrollTop() / (35);
    divs.css('opacity', percent);       
});

Mise À Jour JsFiddle

Excellent travail, mais j'en ai besoin pour travailler dans le 35px limite. Veuillez vérifier mon nouvel exemple. Merci!
Mise à jour de ma réponse

OriginalL'auteur Ghokun

var divs = $('.social, .title'); 
$(window).scroll(function(){
    var p = $(window).scrollTop()/ $(window).height();
    divs.stop().fadeTo("fast",p);
});

Fonctionne aussi, mais ont besoin d'une 35px limite.. s'il vous plaît vérifier mon nouvel exemple. Merci!

OriginalL'auteur gion_13

Vous devez vous connecter pour publier un commentaire.