jQuery waypoints and changing waypoints

Question

Only my second question here (so go easy please!).

I've been trying to use jQuery waypoints to hide and show a border under my navigation based on scroll position. For example whilst the sticky nav is over the slider image - there will be no border, however when the nav is scrolling over content, the border will appear.

Please see: http://thestylebar.co.uk (inspect element in chrome/safari)

Once the user scrolls to the waypoint the css property is changed however when the user scrolls back up the class doesn't return to its default state how can I amend this? Also, the script doesn't seem to work on the homepage?

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

});

http://jsfiddle.net/F5A3y/

Answer 1

You would have to test the direction that waypoints provides. Also, I wouldn't inline CSS like that. You should just toggle a class.

This isn't tested but it should get you close.

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

Then your CSS would be like:

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