I've been having problems with this for days now and it seems like I've spent the last 24 hours staring at the screen scratching my head to find a solution. I think I'm almost there with the code, I just need the div to return to normal (fade back in) when not in the waypoint and it's in the test-border waypoint.
$(document).ready(function() {
$('#working-with-us').waypoint(function(direction) {
if (direction === 'down') {
$('.nav-container').fadeOut();
}
else {
$('.nav-container').fadeOut();
}
});
$('#contact-us').waypoint(function(direction) {
if (direction === 'down') {
$('.nav-container').fadeOut();
}
else {
$('.nav-container').fadeOut();
}
});
$(".test-border").waypoint(function () {
$('.nav-container').fadeIn();
});
});
The test border div is in between the two sections. Any help would be appreciated.
Think I may have sorted it.
$(document).ready(function () {
$('#sectionone, #sectiontwo').waypoint(function (direction) {
if (direction === 'down') {
if ($('.nav-container').is(":visible")) $('.nav-container').fadeOut(200);
} else {
if (!$('.nav-container').is(":visible")) $('.nav-container').fadeIn(200);
}
});
$("header, .test-border").waypoint(function (direction) {
if (direction === 'up') {
if ($('.nav-container').is(":visible")) $('.nav-container').fadeOut(200);
} else {
if (!$('.nav-container').is(":visible")) $('.nav-container').fadeIn(200);
}
});
});