javascript - Jquery slideToggle to slide a div from the top of the screen - but top of screen changes during scroll and div is not visible -

i using jquery slidetoggle slide div top of page. effect working, , can seen here (please hover on member login nav button see effect, blue div slide down):

http://add-ocd.com/testing/

my issue is, when page scrolled downwards, div still sliding down top of document, not top of viewport window, not visible. if scroll down page, , hover on member log in button on right, see problem (main nav moves down, hidden blue div no longer visible).

i wondering how can recalculate top is, , tell slidetoggle slide blue down there.

this may helpful, code using affix regular nav top of page following:

$(function() {      $('#nav-wrapper').height($("#nav").height());     $('#nav').affix({     offset: { top: $('#nav').offset().top } }); }); 

looks you'll have change script around bit, way i'd go wrap nav elements (the login form , nav bar) in div , give div

position: fixed; 

that way nav fixed @ top of window , login form remain @ top of screen regardless of scrolling.

like this:

html:

<div id="nav-section-wrapper">     <div id="login">...</div>     <div id="nav-wrapper>...</div> </div> 

css:

#nav-section-wrapper {     position: fixed;     top: 0;     z-index: 1; }