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

jQuery航点和不断变化的航点

1 个答案: