Fazendo um Vanish dica fixo, deslocando

Question

Eu estou tentando criar um messagebox que é fixo para o fundo de uma página web, então quando o usuário rola, ele permanece (css simples). No entanto, eu gostaria que o messagebox a desaparecer quando o usuário rola até um certo ponto na página.

Por exemplo, se você tem um formulário de inscrição na parte inferior do seu site, eu gostaria de criar um messagebox que lê "rolar para baixo para inscrição", e quando o usuário rolado para baixo a parte superior do formulário de inscrição , a mensagem iria desaparecer ou ficar coberto pelo formulário. Então, quando eles rolada para cima, a mensagem iria reaparecer.

Esta não é minha implementação, mas uma ilustração exata do conceito.

Eu não tenho nenhuma experiência em desenvolvimento com Javascript, mas estava esperando que houvesse um método existente para isso. Estou disposto a aprender, porém, isso é algo que eu gostaria de uso.

Todos os pensamentos? Ou conceitos para começar a aprender?

Obrigado rapazes! (Eu acho que isso poderia ser um método muito inteligente de destacar determinados conteúdos que talvez os usuários poderiam perder se eles não o fizeram rolar através de toda a página.)

Answer 1

This deve fazer o truque (testado no IE7, Firefox, Chrome, Safari ).

Ele usa jQuery e mostra o elemento assim que é visível. Este é o 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();
        }
    });
});

Se você quer todo o elemento a ser visível antes que a mensagem está escondida, substitua o isScrolledIntoView acima com este:

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

O crédito para ambas as funções ir para a this question.