Faire disparaître une info-bulle fixe en faisant défiler

Question

J'essaie de créer une boîte de message qui est fixée au bas d'une page Web, donc quand un utilisateur défile, il reste en place (css simple). Cependant, j'aimerais que la boîte de message disparaisse lorsque l'utilisateur fait défiler un certain point de la page Web. Par exemple, si vous avez un formulaire d'inscription en bas de votre site, je voudrais créer une boîte de message qui se lit "faire défiler vers le bas pour vous inscrire", et quand l'utilisateur a fait défiler vers le haut de l'inscription forme, le message disparaîtrait ou serait couvert par le formulaire. Ainsi, quand ils défileraient, le message réapparaîtrait.

Ceci n'est pas ma mise en œuvre, mais une illustration précise du concept.

Je n'ai aucune expérience de développement avec Javascript, mais j'espérais qu'il existait une méthode pour cela. Je suis prêt à apprendre, c'est quelque chose que j'aimerais utiliser.

Des pensées? Ou des concepts pour commencer à apprendre?

Merci les gars! (Je pense que cela pourrait être une méthode très astucieuse de mettre en évidence certains contenus que les utilisateurs pourraient manquer s'ils ne parcouraient pas toute la page.)

Answer 1

This devrait faire l'affaire (testé dans IE7, Firefox, Chrome, Safari).

Il utilise jQuery et affiche l'élément dès qu'il est visible. Voici le code:

$(document).ready(function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    } 
    // the element to look for 
    var myelement = $('#formcontainer'); 
    // the element to hide when the above is visible 
    var mymessage = $('#mymessage'); 
    $(window).scroll(function() { 
     if(isScrolledIntoView(myelement)) { 
      mymessage.hide(); 
     } else { 
      mymessage.show(); 
     } 
    }); 
}); 

Si vous voulez que l'élément entier soit visible avant que le message est caché, remplacez le isScrolledIntoView ci-dessus avec ceci:

function isScrolledIntoView(elem) { 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) 
     && (elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 

crédit pour ces deux fonctions aller à this question.