通過滾動使固定的工具提示消失

Question

我正在嘗試創建一個固定在網頁底部的消息框，因此當用戶滾動時，它會保持原樣（簡單的 css）。 但是，當用戶滾動到網頁中的某個點時，我希望消息框消失。

例如，如果您的網站底部有一個注冊表單，我想創建一個消息框，上面寫着“向下滾動以注冊”，當用戶向下滾動到注冊表單的頂部時，消息會消失，或者被表格掩蓋。 因此，當他們向上滾動時，該消息會重新出現。

這不是我的實現，而是對該概念的准確說明。

我沒有任何使用 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) );
}

這兩個功能 go 歸功於this question.