Haciendo un Vanish información sobre herramientas fijo desplazándose

Question

Estoy intentando crear un cuadro de mensaje que se fija a la parte inferior de una página web, de modo que cuando el usuario se desplaza, que permanece fija (Simple CSS). Sin embargo, me gustaría que el cuadro de mensaje a desaparecer cuando el usuario se desplaza a un punto determinado en la página web.

Por ejemplo, si tiene un formulario de registro en la parte inferior de su sitio, me gustaría crear un cuadro de mensaje que dice "desplazarse hacia abajo para registrarse", y cuando el usuario desplaza hasta la parte superior del formulario de registro , el mensaje desaparecería, o quede cubierta por la forma. Así que cuando se desplazan hacia arriba, el mensaje reaparecía.

Esta no es mi aplicación, pero una ilustración exacta del concepto.

No tengo ninguna experiencia en desarrollo con Javascript, pero esperaba no había un método existente para esto. Estoy dispuesto a aprender, sin embargo, esto es algo que me gustaría utilizar.

¿Alguna idea? O conceptos para comenzar a aprender?

Gracias chicos! (Creo que esto podría ser un método muy inteligente de resaltar ciertos contenidos que tal vez los usuarios se perderían si no desplazarse por toda la página.)

Answer 1

This debe hacer el truco (probado en IE7, Firefox, Chrome, Safari ).

Se utiliza jQuery y muestra el elemento tan pronto como es visible. Este es el código:

$(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 desea todo el elemento sea visible antes de que el mensaje está oculto, reemplazar el isScrolledIntoView anteriormente con esto:

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

El crédito para ambas funciones vaya a this question.