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

我試圖創建一個固定在網頁底部的消息框，所以當用戶滾動時，它仍然處於放置狀態（簡單的css）。但是，當用戶滾動到網頁中的某個點時，我希望消息框消失。通過滾動使固定的工具提示消失

例如，如果您的網站底部有註冊表單，則需要創建一個「向下滾動至註冊」的消息框，並且當用戶滾動至註冊頂部時形式，消息將消失，或被表單掩蓋。所以當他們向上滾動時，消息會重新出現。

這不是我的實施，而是對這個概念的準確說明。

我沒有任何使用Javascript開發經驗，但希望有一個現有的方法。儘管我願意學習，但這是我想使用的。

有什麼想法？還是要開始學習的概念？

謝謝你們！（我認爲這可能是突出顯示某些內容的一種非常聰明的方法，如果用戶不滾動整個頁面，用戶可能會錯過）。

來源

2009-02-26 Sophisticake

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-26 01:48:11

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

回答

相關問題