Fading Element on Scroll

Question

Tengo curiosidad por cómo puedo crear un DIV (o algo real) que pueda atenuar (o cambiar la opacidad) cuando un usuario se desplaza hacia abajo en la página. Este DIV se ubicaría en la parte superior de la página, pero solo será claramente visible cuando esté en la parte superior de la página.

Además, sería ideal si pudiera hacer que este elemento se desvaneciera en onmouseover, independientemente de la posición actual desplazada en la página.

Answer 1

jQuery permitirían una solución sucinta, mientras se ocultan la mayoría de las discrepancias del navegador. He aquí una rápida maqueta para empezar:

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

Ver también:

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

Answer 2

Use scroll event y analice el valor de document.documentElement.scrollTop para establecer la opacidad apropiada. http://www.quirksmode.org/dom/events/scroll.html

Answer 3

pensé que iba a darle una oportunidad con el valor real de scrollTop dictar el nivel de opacidad, obteniendo así un fundido suave. También agregué el estado de vuelo estacionario para la segunda parte. Thanks to David para refinar las matemáticas para mí.

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