在元素在屏幕頂部附近滾動時觸發的監聽器？

Question

我想保持一個元素始終可見，即使它應該由用戶滾動出來。

1) On Body Load      2) After scrolling down 
-------------------------   ------------------------- 
            ____________ 
            |   | 
            |   | 
            |   | 
            |   | 
            |____________| 

____________ 
|   | 
|   | 
|   | 
|   | 
|____________| 

基本上我想元素的位置改變爲固定時，它的小於20像素從頂部（2）和改變它的位置返回到靜止時，它的遠於20像素從頂部（1）。

有一些插件可以完成像E.G：http://www.vertstudios.com/blog/demo/stickyscroller/demo.php這樣的技巧，但是如果手動操作不太困難，我更喜歡避免它們。

如何創建一個偵聽器，當元素靠近頂部時觸發，而當遠離它時觸發一個偵聽器？

Answer 1

需要一個CSS類和規則來修正該類。如果沒有應用班組長你的正常的CSS將設置絕對

var $div = $('#mydiv'); 
$(window).on('scroll', function() {  
     var changeClass = false, 
     is_fixed = $div.hasClass('fixedClass'); 

    if ($(this).scrollTop() > 20) { 
     changeClass = is_fixed ? false : true; 
    } else { 
     changeClass = is_fixed ? true : false; 
    } 
    if (changeClass) { 
     $div.toggleClass('fixedClass'); 
    } 

}) 

可以寫這個較短的代碼，但由於滾動觸發事件很多次第二，檢查是否類已經存在或不削減了很多額外操縱DOM

的