La décoloration Élément de Défilement

Je suis curieux de savoir comment je peux créer un DIV (ou rien) que je ne peux fondu (ou de modifier l'opacité de l') lorsqu'un utilisateur fait défiler la page. Cette DIV asseyais en haut de la page, mais seulement être clairement visible lors de tout en haut de la page.

En outre, il serait idéal si je j'ai pu avoir cet élément fondu de retour dans onmouseover, quel que soit le courant de volutes de position sur la page.

InformationsquelleAutor marck | 2009-09-27
  1. 8

    jQuery permettrait une succincte solution, tout en cachant la plupart des navigateurs les écarts. Voici une petite maquette 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:

    • Merci pour votre réponse! J'ai eu l'opérationnel, mais étant complètement nouveau dans le monde de jquery et javascripting, je ne suis pas sûr où aller à partir d'ici. La boîte ne se décolorent ou de défilement, mais il semble rester délavé, peu importe si j'ai faites défiler vers le haut à nouveau. Et comment puis-je contrôler dans quelle mesure l'on a pour faire défiler les messages? Merci encore!!
    • Malheureusement, court de vous fournir une solution complète, il n'y a pas beaucoup plus d'aide que peut être donnée. Si vous êtes vraiment intéressés à obtenir ce travail, vous aurez probablement à creuser et d'apprendre un peu de JavaScript.
    InformationsquelleAutor karim79
  2. 2

    J'ai pensé que je donnerais un rendez-vous à l'aide de la valeur réelle de scrollTop de dicter le niveau d'opacité, obtenant ainsi une douceur fade. J'ai aussi ajouté de l'état de pointage pour la deuxième partie. Merci à 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);
    });
});
    • Pour une raison quelconque, cela ne semble pas être un travail sur FF 8.0.1?
    • Et IE ne semble pas fonctionner, cependant, sur les deux FF et IE hover fonctionne. Donc, je pense jquery et css opacité ne sont pas de travail de la croix-navigateur?!
    InformationsquelleAutor Daniel
  3. 0

    Utilisation de défilement de l'événement, et d'analyser la valeur de document.documentElement.scrollTop pour définir les approprier l'opacité.
    http://www.quirksmode.org/dom/events/scroll.html

    InformationsquelleAutor Anatoliy