Only Showing DIV When Passed Scroll Position Issue

Question

I have found out how to show divs when you reach past a scroll position. The JQuery code I am using to do so is this:

$(window).scroll(function() {
if ($(this).scrollTop() > 75) {
    $("#ddmenubg2:hidden").fadeIn('slow');
}
else {
    $("#ddmenubg2:visible").fadeOut("slow");
}

});

As far as I know this is telling the div ddmenubg2 to be hidden before you reach the 75 scrolling mark, then anywhere past that mark, the div stays visible... and anything before that mark, the div is hidden. But, for some reason the ddmenubg2 div is on my page before the 75 pixel mark. The div then fades away and re-fades in when I enter past the 75 mark. This only happens on the first page load or refresh, it works fine after you scroll up and down multiple times, but whenever you refresh the page this problem occurs until you scroll down.

Now, a short fix to this problem is making the ddmenubg2 div's display "none". This actually fixes the whole scrolling issue but it leaves my main menu functioning incorrectly.

So how would I make this so the ddmenubg2 div stays hidden before you go past 75 and stay once you go past 75.. even on the first page load or refresh?

Answer 1

Use visibility: hidden instead of display none. This will keep the elements width and height attributes but will make it not visible. Here is how I modified your code to make it work.

The CSS

#ddmenubg2{
   visibility:hidden;
}

The javascript

$(function(){
    $(window).scroll(function() { 
        if ($(this).scrollTop() > 75) { 
            $("#ddmenubg2:hidden").css('visibility','visible');   
            $("#ddmenubg2:hidden").fadeIn('slow');  
        } 
        else {     
            $("#ddmenubg2:visible").fadeOut("slow"); 
        }  
    });
});