Scroll上的顯示控制

Question

是否有一種簡單的方法可以在頁面底部顯示窗格，當用戶向下滾動到頁面的一半以上並在向上滾動時隱藏頁面。如果他們不想再次看到它，它們也應該能夠關閉它。

這是我到目前爲止已經試過：

$(window).scroll(function() { 
     if($(this).scrollTop() > 200) { 
      $('#note').fadeIn(); 
     } else { 
      $('#note').fadeOut(); 
     } 
}); 

$("#note").click(function() { 
     $("#note").fadeOut("slow"); 
     return false; 
}); 

http://jsfiddle.net/Zvx8h/1/

Answer 1

首先使用position:fixed與此保持你的面板底部：

#note{ 
    display:none; 
    position:fixed; 
    bottom:0; 
    right:0; 
} 

然後點擊刪除後該窗口的scroll事件如下：

$("#note").click(function() { 
    $("#note").fadeOut("slow"); 
    $(window).off('scroll'); 
}); 

檢查該演示http://jsfiddle.net/Zvx8h/2/