滾動過去x-px時刪除類（從底部）

Question

我有以下jQuery腳本，它在頁面上滾動瀏覽點時向元素添加類。

jQuery(document).ready(function($) { 
     var s = $("#sticker"); 
     var pos = s.position();      
     $(window).scroll(function() { 
      var windowpos = $(window).scrollTop(); 
      if (windowpos >= pos.top + 380) { 
       s.addClass("stick"); 
      } else { 
       s.removeClass("stick"); 
      } 
     }); 

這是HTML部分。

<div id="sticker"> 
    <div class="widget"> 
     <?php dynamic_sidebar('widget-area-2'); ?> 
    </div>        
    <h3>Uw voordelen</h3> 
     <ul class="ClassName"> 
      <li><strong style="vertical-align:top; margin-bottom:0px">Something A</strong> 
       <div class="submenu">Some text A</div> 
      </li> 
      <li><strong style="vertical-align:top; margin-bottom:0px">Something B</strong> 
       <div class="submenu">Some text B</div> 
      </li> 
      <li><strong style="vertical-align:top; margin-bottom:0px">Something C</strong> 
       <div class="submenu">Some text C</div> 
      </li> 
     </ul> 
</div> 

現在發生的事情是在div #sticker比頁腳元素較高，增加了類.stick時。這導致內容滑過頁腳元素，這是我不想要的。

所以我想到的溶劑是在stick類上的removeClass，當你向下滾動頁面上的x個像素時。所以，我想下面的代碼：

jQuery(document).ready(function($) { 
     var s = $("#sticker"); 
     var pos = s.position();      
     $(window).scroll(function() { 
      var windowpos = $(window).scrollTop(); 
      if (windowpos >= pos.top + 380) { 
       s.addClass("stick"); 
      } if (windowpos >= pos.top + 900) { 
       s.removeClass("stick"); 
      } else { 
       s.removeClass("stick"); 
      } 
     }); 

但是沒有去，後來我發現這個頁面上的simular的問題，但是這不是exacly什麼我要找的。但我把它添加到我的代碼中，如下所示：

jQuery(document).ready(function($) { 
     var s = $("#sticker"); 
     var pos = s.position();      
     $(window).scroll(function() { 
      var windowpos = $(window).scrollTop(); 
      if (windowpos >= pos.top + 380) { 
       s.addClass("stick"); 
      } else if (windowpos >= pos.top + 900) { 
       s.removeClass("stick"); 
      } else { 
       s.removeClass("stick"); 
      } 
     }); 

兩個代碼都沒有做我想讓他們做的事。任何人都可以用正確的代碼來幫助我，或者指引我走向正確的方向嗎？謝謝。

Answer 1

的如果條件是在錯誤的順序。您應該使用：

jQuery(document).ready(function($) { 
    var s = $("#sticker"); 
    var pos = s.position(); 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos >= pos.top + 900) { 
      s.removeClass("stick"); 
     } else if (windowpos >= pos.top + 380) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
}); 

甚至更​​好：

jQuery(document).ready(function($) { 
    var s = $("#sticker"); 
    var pos = s.position(); 
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos >= pos.top + 380 && windowpos < pos.top + 900) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
}); 

Answer 2

你的代碼中有一些語法錯誤。

這裏是展示它的快速演示現在的工作：

http://codepen.io/paulcredmond/pen/jrzdxJ?editors=1111

$(document).ready(function($) { 
    var s = $("#sticker"); 
    var pos = s.position(); 

    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 

     if (windowpos >= pos.top + 380) { 
      s.addClass("stick"); 
     } else if (windowpos >= pos.top + 900) { 
      s.removeClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     }  

    }); 
});