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?

`$("#ddmenubg2:hidden")` doesn't mean it forces the div to be hidden, it just selects it **if** it's hidden: [Hidden Selector Documentation](http://api.jquery.com/hidden-selector/) (because there's no need to fade it in if it's already visible). Why is your menu functioning incorrectly if you hide the `#ddmenubg2` by default using display none? It would be helpful if you could make a [fiddle](http://jsfiddle.net) showcasing your problem. — Bogdan, Nov 18 '12 at 01:12
It would take forever to copy and paste all of my website into fiddle. But, the dropdown menu I have doesn't function correctly when I make the display none. :( Is there anyway to hide the div until it reaches the 75 scroll mark, without using the display none code? Is there any solution that involves or manipulates the JQuery code I listed above? — user1658560, Nov 18 '12 at 01:22

Blake Plumb · Accepted Answer · 2013-05-16T14:09:06.337

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"); 
        }  
    });
});

Only Showing DIV When Passed Scroll Position Issue

1 Answers1