1

Webページの下部に固定されたメッセージボックスを作成しようとしているので、ユーザーがスクロールしてもそのままになります(単純なcss)。ただし、ユーザーが Web ページの特定のポイントまでスクロールすると、メッセージ ボックスが消えるようにしたいと考えています。

たとえば、サイトの下部にサインアップ フォームがある場合、「スクロール ダウンしてサインアップ」というメッセージ ボックスを作成し、ユーザーがサインアップ フォームの上部までスクロールすると、メッセージ消えるか、フォームに覆われます。そのため、上にスクロールすると、メッセージが再び表示されます。

これは私の実装ではありませんが、概念の正確な図です。

Javascript を使用した開発の経験はありませんが、これには既存の方法があることを望んでいました。私は喜んで学びますが、これは私が使いたいものです。

何かご意見は？または学習を開始するための概念？

みんなありがとう！(これは、ユーザーがページ全体をスクロールしないと見逃す可能性のある特定のコンテンツを強調表示するための非常に賢い方法であると思います。)

4

1 に答える 1

4

Thisトリックを行う必要があります (IE7、Firefox、Chrome、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.

于 2009-02-26T01:48:11.353 に答える