Fading Element on Scroll

Question

Sono curioso di sapere come creare un DIV (o qualcosa di veramente) che possa sfumare (o modificare l'opacità di) quando un utente scorre la pagina verso il basso. Questo DIV si posizionerebbe nella parte superiore della pagina, ma solo essere chiaramente visibile quando si trova nella parte superiore della pagina.

Inoltre, sarebbe ideale se io potessi avere questo elemento dissolvenza in onmouseover, indipendentemente dalla posizione corrente della pagina.

Answer 1

jQuery consentire una soluzione succinta, nascondendo la maggior parte delle discrepanze del browser. Ecco una rapida mock-up per iniziare:

<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> 

Vedi anche:

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

Answer 2

Utilizzare l'evento di scorrimento e analizzare il valore di document.documentElement.scrollTop per impostare un'opacità appropriata. http://www.quirksmode.org/dom/events/scroll.html

Answer 3

ho pensato di dare un andare con il valore effettivo di scrollTop a dettare il livello di opacità, ottenendo in tal modo una dissolvenza liscia. Ho anche aggiunto lo stato hover per la seconda parte. Thanks to David per affinare la matematica per me.

//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); 
    }); 
});