Fading Element on Scroll

Question

Je suis curieux de savoir comment je peux créer un DIV (ou quelque chose de vraiment) que je peux fondre (ou modifier l'opacité de) quand un utilisateur fait défiler la page. Ce DIV serait assis en haut de la page, mais seulement être clairement visible en haut de la page.

En outre, il serait idéal si je pouvais avoir cet élément se fondre dans onmouseover, quelle que soit la position défilée actuelle sur la page. Utilisez l'événement de défilement et analysez la valeur de document.documentElement.scrollTop pour définir l'opacité appropriée.

Answer 1

jQuery permettrait une solution succincte, tout en cachant la plupart des différences de navigateur. Voici une maquette rapide pour vous aider à démarrer:

<script type="text/javascript"> 

    //when the DOM has loaded 
    $(document).ready(function() { 

     //attach some code to the scroll event of the window object 
     //or whatever element(s) see http://docs.jquery.com/Selectors 
     $(window).scroll(function() { 
       var height = $('body').height(); 
       var scrollTop = $('body').scrollTop(); 
       var opacity = 1; 

       // do some math here, by placing some condition or formula 
       if(scrollTop > 400) { 
        opacity = 0.5; 
       } 

       //set the opacity of div id="someDivId" 
       $('#someDivId').css('opacity', opacity); 
     }); 
    }); 
</script> 

Voir aussi:

• jQuery
• Selectors
• CSS
• Events/Scroll
• CSS/ScrollTop
• CSS/ScrollLeft

Answer 2

http://www.quirksmode.org/dom/events/scroll.html

Answer 3

Je pensais que je lui donnerais une fois en utilisant la valeur réelle de scrollTop de dicter le niveau d'opacité, obtenant ainsi un fondu lisse. J'ai également ajouté l'état hover pour la deuxième partie. Thanks to David pour affiner les maths pour moi.

//reduce the opacity of the banner if the page is scrolled. 
$(window).scroll(function() { 
    var height = $("body").height(); 
    var scrollTop = $("body").scrollTop(); 
    var opacity = 1; 

    if(scrollTop < 41) 
    {opacity = 1-Math.floor(scrollTop)/100;} 
    else 
    {opacity = 0.6;} 

    $("#header").css("opacity", opacity); 
    $("#header").hover(function(){ 
    $(this).css("opacity", 1); 
    },function(){ 
    $(this).css("opacity", 0.6); 
    }); 
});