jQuery航點和更改航點

Question

這只是我的第二個問題（請輕松點！）。

我一直在嘗試使用jQuery航點來隱藏和顯示基於滾動位置的導航下的邊框。 例如，當粘性導航位於滑塊圖像上方時-將沒有邊框，但是當導航在內容上滾動時，將顯示邊框。

請參閱： http : //thestylebar.co.uk （在chrome / safari中檢查元素）

一旦用戶滾動到航路點，css屬性就會更改，但是當用戶向上滾動時，類不會返回其默認狀態，該如何修改呢？ 另外，該腳本似乎在首頁上不起作用？

$(function() {                     
  $('.l-main-h').waypoint(               //  .l-main-h is the content area
    function() {
      $('.strip').css({"border-bottom":"none"});
    }
  )

});

http://jsfiddle.net/F5A3y/

Answer 1

您將必須測試waypoints提供的方向。 另外，我不會像那樣內聯CSS。 您應該只切換一個班級。

這未經測試，但它應該使您接近。

$('.l-main-h').waypoint(function(direction) {
  $('.strip').toggleClass('bordered', direction === 'down');
});

然后您的CSS就像：

.strip.bordered {
  border-bottom: 2px solid #fff;
}