javascript - jQuery 航点和更改航点

Question

这里只有我的第二个问题(请放轻松!)。

我一直在尝试使用 jQuery 航路点根据滚动位置在我的导航下方隐藏和显示边框。例如，当粘性导航位于 slider 图像上方时 - 将没有边框，但是当导航在内容上滚动时，将出现边框。

请参阅: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;
}