Fare una vanish tooltip fisso scorrendo

Question

Sto cercando di creare una messagebox che è fissato al fondo di una pagina web, in modo che quando un utente scorre, ma resta fermo (semplice css). Tuttavia, mi piacerebbe la messagebox a scomparire quando l'utente scorre fino ad un certo punto della pagina web.

Ad esempio, se si dispone di un modulo di iscrizione sul fondo del vostro sito, mi piacerebbe creare una messagebox che dice "scorrere verso il basso per l'iscrizione", e quando l'utente scorrere verso il basso per la parte superiore del modulo di iscrizione , il messaggio sarebbe scomparso, o ottenere coperto dalla forma. Così, quando hanno fatto scorrere, il messaggio sarebbe riapparire.

Questa non è la mia realizzazione, ma un'illustrazione precisa del concetto.

Non ho alcuna esperienza di sviluppo con JavaScript, ma speravo ci fosse un metodo esistente per questo. Sono disposto a imparare però, questo è qualcosa che mi piace usare.

Qualche idea? O concetti per iniziare ad imparare?

Grazie ragazzi! (Credo che questo potrebbe essere un metodo molto intelligente di mettere in evidenza alcuni contenuti che forse gli utenti avrebbero perdere se non scorrere l'intera pagina.)

Answer 1

This dovrebbe fare il trucco (testato in IE7, Firefox, Chrome, Safari ).

Si utilizza jQuery e mostra l'elemento non appena è visibile. Questo è il codice:

$(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();
        }
    });
});

Se si desidera che l'intero elemento sia visibile prima che il messaggio è nascosto, sostituire il isScrolledIntoView sopra con questo:

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

Credito per entrambe queste funzioni andare a this question.