Faire une Vanish infobulle fixe en faisant défiler

Question

Je suis en train de créer une MessageBox qui est fixé au fond d'une page Web, de sorte que lorsqu'un utilisateur fait défiler, il reste en place (css simples). Cependant, je voudrais que le messagebox à disparaître lorsque l'utilisateur fait défiler jusqu'à un certain point dans la page web.

Par exemple, si vous avez un formulaire d'inscription sur le fond de votre site, je voudrais créer un messagebox qui lit « défiler vers le bas pour inscrire », et lorsque l'utilisateur a fait défiler vers le haut du formulaire d'inscription en , le message disparaîtrait, ou se couvrir par la forme. Alors, quand ils défiler vers le haut, le message réapparaît.

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

Je n'ai pas d'expérience dans le développement avec Javascript, mais espérais qu'il y avait une méthode existante pour cela. Je suis prêt à apprendre si, cela est quelque chose que je voudrais utiliser.

Toutes les pensées? Ou concepts pour commencer à apprendre?

Merci les gars! (Je pense que cela pourrait être une méthode très intelligent de mettre en évidence certains contenus que peut-être les utilisateurs manqueraient si elles ne sont pas défiler la page.)

Answer 1

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

Il utilise jQuery et montre 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 vont this question.