Faire en sorte que Nav Div apparaisse lors du défilement

Je veux qu’un div apparaisse en haut lorsque l’utilisateur fait défiler une classe div appelée .header1 (ce div contient 3 autres div)

Je veux que la navigation apparaisse dans ce .fixedDiv . J’ai trouvé ma réponse ici , mais je n’ai pas été en mesure de l’implémenter sur mon site. Voici ce que j’ai

  var startY = $('.header1').position().top + $('.header1').outerHeight(); $(window).scroll(function () { if( $(this).scrollTop() > startY ){ $('.fixedDiv').slideDown(); }else{ $('.fixedDiv').slideUp(); } });

Et j’ai un div appelé .fixedDiv sur mon site en disant topnav, mon problème est que le div est toujours là. Il ne se cache pas ou n’apparaît pas lors du défilement.

Ceci est un lien vers mon site web.

Pour css, je n’ai rien configuré pour .header1 car d’autres div sont à l’intérieur et devraient correspondre à la hauteur nécessaire pour que .fixedDiv apparaisse. Et .fixedDiv a css

 .fixedDiv { position:fixed; top:0px; left:0px; background:orange; }

Je sais que je suis sur le sharepoint commencer, mais je n’arrive pas à comprendre ce qui me manque.

Pourquoi ne pas simplement utiliser un fadeIn et un fadeOut avec setInterval sur scroll? Quelque chose dans le sens de …

 .scroll( function() { if($(".fixedDiv").css('display', 'none')) { $(".fixedDiv").fadeIn("normal", function() { setInterval( function() { $(".fixedDiv").fadeOut("normal"); }, 1500 ); }); } }

Tester $(".header1").position() donne TypeError: undefined is not a function .

Vous semblez être en mode noConflict en raison de WordPress.

Essayez ceci à la place:

 jQuery(document).ready(function($) { var startY= $('.header1').position().top + $('.header1').outerHeight(); $(window).scroll(function () { if($(this).scrollTop() > startY ){ $('.fixedDiv').slideDown(); }else{ $('.fixedDiv').slideUp(); } }); });

Modifier: vous avez une supplémentaire (au moins, Chrome la voit). Cela semble fonctionner correctement dans Firefox.

entrez la description de l'image ici

Alors finalement, il a compris, et je l’aime, il a l’air génial

 jQuery(document).ready(function() { var startY= jQuery('.header1').position().top + jQuery('.header1').outerHeight(); jQuery('.fixedDiv').html( jQuery('#nav').html()); jQuery(window).scroll(function () { if(jQuery(this).scrollTop() > startY ){ jQuery('.fixedDiv').slideDown(); }else{ jQuery('.fixedDiv').slideUp(); } }); });

Pas sûr de ce que la ligne supplémentaire (ligne 3) fait mais que ce qui manquait … Merci