Currently, I have this script. The value of 700 is placed after trial and error.

$(window).scroll(function () {
    if ($(window).scrollTop() > 700) { 
        $('#top_nav').slideDown("slow");
    }
    else{
        $('#top_nav').slideUp("fast");
    }
});

And I have my top navigation which is fixed with display set to none.

div#top_nav {
    width: 100%;
    z-index: 999;
    opacity: 0.9;
    border-bottom: 1px solid rgb(204, 204, 204);
    box-shadow: 0 0 7px rgb(136, 136, 136);
    position: fixed;
    background-color: rgb(255, 255, 255);
    display: none;
}

My header has the following styles.

#index header {
    background-attachment: fixed;
    background-image: url("../images/bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Straight away, I can see the problem. I have to adjust the value of 700 manually as the height of my header may change.

My question is how would I go about changing the script so that it gets the height of the header including, maybe, margin and padding so that when I scroll, my top navigation slides down and shows.

Currently it is working perfectly. The only problem is the fixed value of 700. There has to a more variable way type of doing this.

Currently, I have this script. The value of 700 is placed after trial and error.

$(window).scroll(function () {
    if ($(window).scrollTop() > 700) { 
        $('#top_nav').slideDown("slow");
    }
    else{
        $('#top_nav').slideUp("fast");
    }
});

And I have my top navigation which is fixed with display set to none.

div#top_nav {
    width: 100%;
    z-index: 999;
    opacity: 0.9;
    border-bottom: 1px solid rgb(204, 204, 204);
    box-shadow: 0 0 7px rgb(136, 136, 136);
    position: fixed;
    background-color: rgb(255, 255, 255);
    display: none;
}

My header has the following styles.

#index header {
    background-attachment: fixed;
    background-image: url("../images/bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

Straight away, I can see the problem. I have to adjust the value of 700 manually as the height of my header may change.

My question is how would I go about changing the script so that it gets the height of the header including, maybe, margin and padding so that when I scroll, my top navigation slides down and shows.

Currently it is working perfectly. The only problem is the fixed value of 700. There has to a more variable way type of doing this.

• javascript
• jquery
• html
• css

1 Answer 1

Try with outerHeight()

var headerHeight = $('header').outerHeight();

$(window).scroll(function () {
    if ($(window).scrollTop() > headerHeight) { 
        $('#top_nav').slideDown("slow");
    }
    else{
        $('#top_nav').slideUp("fast");
    }
});

Edit: Fiddle