scroll close/open nav like a sliding door

Question

I'm trying to close/open a nav like a sliding door on horizontal scroll.

PROBLEM 1: When you scroll right the nav closes... but I'm having trouble opening it back up when you scroll back to the beginning of the page or hit the end. The nav opens but then loops the function or closes quickly, not sure what's causing this?

JS FIDDLE (SCROLL NAV OPEN/CLOSE)

    // PAGE LEFT NAV
    //SCROLL RIGHT HIDE NAV
        $(window).scroll(function() {

        if ($(this).scrollLeft() > 0)
         {
            $('.nav-line-top').animate({'top': 150},400);
            $('.nav-line-bottom').animate({'top': 150},400);
            $('.nav-serries-inner').delay(0).slideUp();  
         }

        else
         {
            $('.nav-line-top').animate({'top': 0},400);
            $('.nav-line-bottom').animate({'top': 0},400)
            $('.nav-serries-inner').delay(0).slideDown();
         }
    });



    // SCROLL END OF PAGE + SHOW NAV 
    $(window).scroll(function () { 
        if ($(window).scrollLeft() >= $(document).width() - $(window).width() - 40) {
            $('.nav-line-top').animate({'top': 0},400);
            $('.nav-line-bottom').animate({'top': 0},400);
            $('.nav-serries-inner').delay(0).slideDown();
        }
        else
         {
            $('.nav-line-top').animate({'top': 150},400);
            $('.nav-line-bottom').animate({'top': 150},400)
            $('.nav-serries-inner').delay(0).slideUp();
         }
    });

PROBLEM 2: The nav doesn't quite open and close how I envision it. I want the lines to go together or split like two sliding doors going vertically. What it does now is the lines close, delay, then they move down to the center position, it should flow together in one motion.

An example of the opening/closing I was thinking of is like this EXAMPLE but vertically

    nav.serries{
position:fixed;
top:56%;
left:0;

display:block;
height:400px;
width:150px;
margin: -200px 0;

padding-left:20px;
}

.nav-line{
width: 20px;
border-bottom: 1px solid #808080;

margin-bottom: 5px;
margin-top: 11px;

postion:relative;
top:0px;
left:0;     
}




 //HOVER SHOW NAV
    $('.nav-serries-open').hover(function(){
        $('.nav-line-top').animate({'top': 0},400);
        $('.nav-line-bottom').animate({'top': 0},400);
        $('.nav-serries-inner').delay(0).slideDown(); 
    });

    // LEAVE HOVER HIDE NAV
    $('nav.serries').mouseleave(function(){
        $('.nav-line-top').animate({'top': 150},400);
        $('.nav-line-bottom').animate({'top': 150},400);
        $('.nav-serries-inner').delay(200).slideUp(); 

    })

Thanks for any help.

Answer 1

First of all - try not to repeat some lines of code - You will find it easier to debug or change your animations if you put them in one place in separate funcions and call them whenever you need them.

Another thing you will need is something that will help you to not to "close the closed door" or "open ones which are already opened" - so lets have a variable named navigation and keep there true if it's open or false if it is close.

var navigation = true; // because it is open at the start


function nav_open() {
    if (!navigation) { // if it's closed
        navigation = true; // now it is open (will be in 400ms - but it definetly will not need to be opened again)
        $('.nav-line-top').animate({'top': 0},400);
        $('.nav-line-bottom').animate({'top': 0},400);
        $('.nav-serries-inner').delay(0).slideDown();
    }
}

function nav_close() {
    if (navigation) { // if it's open
        navigation = false; // remember that it is close now
        // ..and start nav-closing animations...
        $('.nav-line-top').animate({'top': 150},400);
        $('.nav-line-bottom').animate({'top': 150},400);
        $('.nav-serries-inner').delay(200).slideUp(); 
    }
}

now your code will look better and cleaner ...you will notice that you opening on entering one element but closing on mouse leave another element and you should notice that you closing and opening your nav at the same time when scroll is set to the left or right edge.... lets fix these too.... now it will be:

    // mouse hover / leave - both events on nav element
$('nav.serries').hover(function() { nav_open(); });
$('nav.serries').mouseleave(function() { nav_close(); });

// scroll around left or right edge
$(window).scroll(function() {
    var scrollX = $(this).scrollLeft();
    if ((scrollX < 10) || (scrollX >= $(document).width() - $(window).width()-10)) {
        nav_open();
    } else {
        nav_close();
    }
});

ok - now it works (at least) - now it only needs a little changes to animation (..yeah and fixes to bad html/css would be nice too) ...but it is close to what you wanted i think best what you can do at this moment is:

// css:

.nav-serries-inner {position:relative; top:30px; width:90px; border-top:1px solid #aaa; border-bottom:1px solid #aaa;}

// html: remove your line <a><div class=line-top></div></a> and the other one (which is also "line-top" by the way)
// js: remove 3 lines from animations and do just this one in nav_open:
$('.nav-serries-inner').stop().animate({'top': 30, height: "toggle",opacity:"toggle" },400);

// and this in nav_close:
$('.nav-serries-inner').stop().animate({top: 150, height: "toggle", opacity:"toggle" },400);

i really think the effect is not bad now. working fiddle: http://jsfiddle.net/vHcr8/8/