Affichage de DIV uniquement lors de la passation de la position de défilement Problème

Question

J'ai découvert comment afficher des symboles lorsque vous atteignez une position de défilement. Le code JQuery que j'utilise pour le faire est le suivant:

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

}); Autant que je sache, cela indique à la div ddmenubg2 d'être cachée avant d'atteindre la marque de défilement 75, alors n'importe où après cette marque, la div reste visible ... et tout ce qui précède cette marque, la div est cachée. Mais, pour une raison quelconque, le div ddmenubg2 est sur ma page avant la marque de 75 pixels. Le div disparaît alors et se fond à nouveau quand je franchis la marque des 75. Cela ne se produit que sur la première page de chargement ou d'actualisation, cela fonctionne correctement après avoir fait défiler plusieurs fois, mais chaque fois que vous actualisez la page, ce problème se produit jusqu'à ce que vous faites défiler vers le bas.

Maintenant, une solution courte à ce problème est de rendre l'affichage de ddmenubg2 div "none". Cela corrige en fait tout le problème de défilement mais il laisse mon menu principal fonctionner incorrectement.

Alors, comment puis-je faire de sorte que le div ddmenubg2 reste caché avant d'aller au-delà de 75 et reste une fois que vous passez 75 .. même sur la première page de chargement ou de rafraîchissement?

Answer 1

Utilisez visibility: hidden au lieu d'afficher aucun. Cela conservera les attributs de largeur et de hauteur des éléments, mais le rendra invisible. Voici comment j'ai modifié votre code pour le faire fonctionner.

Le CSS

#ddmenubg2{ 
    visibility:hidden; 
} 

Le javascript

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