CODEWITHSUNDEEP
javascriptjquerycss
SeanQuinn781
SeanQuinn781

Reputation: 93

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 am using Jquery slideToggle to slide a div from the top of the page. The effect is working, and can be seen here (PLEASE HOVER OVER THE MEMBER LOGIN NAV BUTTON TO SEE EFFECT, the blue div will slide down):

My issue is, that when the page is scrolled downwards, the div is still sliding down from the very top of the document, not the top of the viewport window, so it is not visible. If you scroll down the page, and hover over member log in button on the right, you will see the problem (main nav moves down, but the hidden blue div is no longer visible).

I am wondering how I can recalculate where the top is, and tell slidetoggle to slide the blue down from there.

This may be helpful, the code I am using to affix the regular nav to the top of the page is the following:

$(function() {

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

Upvotes: 2

Views: 920

Answers (1)

jordajm
jordajm

Reputation: 764

Looks like you'll have to change your script around a bit, but the way I'd go about this is to wrap all your nav elements (the login form and the nav bar) in a div and give that div 

position: fixed;

That way your nav will be fixed at the top of the window and the login form will remain at the top of the 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;
}

Upvotes: 1

Related Questions