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;
}