This is only the second question I'm asking here, so please be gentle!
I've been experimenting with jQuery waypoints to dynamically show and hide a border under my navigation menu based on scroll position. For instance, when the sticky nav is over the slider image, there should be no border. However, as the nav scrolls over content, the border should appear.
You can check out the effect at: (inspect element in Chrome/Safari).
The issue I'm facing is that once the user reaches the waypoint, the CSS property changes, but if they scroll back up, the class doesn't revert to its default state. How can I fix this? Also, it seems like the script isn't working on the homepage?
$(function() {
$('.l-main-h').waypoint( // .l-main-h is the content area
function() {
$('.strip').css({"border-bottom":"none"});
}
)
});
Here's a JSFiddle link for reference: http://jsfiddle.net/F5A3y/