Search code examples
jqueryjquery-pluginsjquery-waypoints

jQuery waypoints issue


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.


Solution

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