スクロールすることにより、固定されたツールチップワニスを作ります

Question

私は、Webページの底部に固定されているメッセージボックスを作成しようとしているので、ユーザーがスクロールは、それが（簡単なCSS）を入れたままとき。 しかし、私は、Webページ内の特定のポイントにするとき、ユーザーがスクロールを消滅するメッセージボックスをたいと思います。

あなたのサイトの下部にサインアップフォームを持っている場合たとえば、私は「登録にはスクロールダウンし、」読み込みメッセージボックスを作成したいのですが、ユーザーは、サインアップフォームの一番上までスクロールしたときに、メッセージが消えてしまう、またはフォームによって隠蔽ます。 彼らは上にスクロールするときので、メッセージが再表示されます。

これは私の実装ではなく、概念の正確なイラスト。

私はJavaScriptで開発していない任意の経験を持っていますが、このための既存の方法があった期待していました。私も学ぶために喜んだ、これは私が使用したいものです。

任意の考え？や概念が学習を開始するには？

みんなありがとう！ （私は、これは彼らがページ全体をスクロールしなかった場合、おそらくユーザーは見逃してしまう、特定のコンテンツを強調するのは本当に賢い方法かもしれないと思います。）

Answer 1

This のIE7、Firefoxの、クロム、Safariでテストしたトリックを（行う必要があります）。

これはjQueryのを使用して、すぐにそれが見えるように要素を示しています。これは、コードです。

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

のメッセージが隠されている前に、あなたは全体の要素が見えるようにしたい場合は、これに上記のisScrolledIntoViewを置き換えます：

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

これらの機能の両方のためのクレジットは、 this question.するに行きます