固定ツールチップをスクロールして消す

Question

私はWebページの下部に固定されたメッセージボックスを作成しようとしているので、ユーザーがスクロールするとput（単純なCSS）のままです。 しかし、ユーザーがWebページの特定の場所にスクロールすると、メッセージボックスが消えてしまいます。

たとえば、サイトの下部に申し込みフォームがある場合は、「サインアップまでスクロールする」というメッセージボックスを作成し、ユーザーが登録のトップにスクロールするとメッセージが消えたり、フォームで覆われたりします。 それで、彼らがスクロールアップすると、メッセージが再び表示されます。

これは私の実装ではなく、概念の正確な図です。

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

どのような考えですか？または学習を始めるための概念？

ありがとうございました！ （これは、ページ全体をスクロールせずに見逃してしまうと思われる特定のコンテンツを強調する本当に巧妙な方法だと思います）。

Answer 1

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.に行きます