Einen festen Tooltip verschwinden durch Scrollen

Question

Ich versuche, eine messagebox zu erstellen, die auf dem Boden einer Webseite festgelegt ist, so dass, wenn ein Benutzer den Bildschirm, was für eine hervorragende Haftung (einfache CSS). Allerdings würde ich die messagebox mögen, wenn der Benutzer einen Bildlauf zu einem bestimmten Punkt in der Webseite verschwinden.

Zum Beispiel, wenn Sie ein Anmeldeformular auf der Unterseite Ihrer Website haben, würde Ich mag ein messagebox erstellen, die „nach unten scrollen, um sich anzumelden“, heißt es, und wenn der Benutzer nach unten gescrollt, um den oberen Rand des Anmeldeformular verschwinden, würde die Nachricht, oder lassen Sie sich von der Form bedeckt. Also, wenn sie nach oben gescrollt, würde die Meldung erneut angezeigt.

Das ist nicht meine Implementierung, sondern eine genaue Darstellung des Konzepts.

Ich habe keine Erfahrung mit Javascript zu entwickeln, aber hatte gehofft, dass eine bestehende Methode dafür da war. Ich bin bereit, wenn auch zu lernen, das ist etwas, Ich mag würde verwenden.

Alle Gedanken? Oder Konzepte Lernen zu beginnen?

Danke Jungs! (Ich denke, das eine wirklich clevere Methode der Hervorhebung bestimmte Inhalte werden könnte, dass vielleicht Benutzer vermissen würden, wenn sie nicht durch die gesamte Seite scrollen haben.)

Answer 1

This sollten in IE7, Firefox, Chrome, Safari, den Trick (getestet tun ).

Es nutzt jQuery und zeigt das Element, sobald es sichtbar ist. Dies ist der 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();
        }
    });
});

Wenn Sie das gesamte Element sichtbar sein soll, bevor die Nachricht versteckt ist, ersetzen Sie die isScrolledIntoView oben mit diesem:

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

Kredit für beide Funktionen gehen auf this question.