Hacer Nav Div aparece cuando se desplaza hacia abajo

Quiero que aparezca un div en la parte superior cuando el usuario se desplaza hacia abajo para pasar una clase div llamada .header1 (Este div tiene 3 div más dentro)

Quiero que el .fixedDiv aparezca en ese .fixedDiv . Encontré mi respuesta aquí , pero no he podido implementarla en mi sitio. Esto es lo que obtuve

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

Y tengo un div llamado .fixedDiv en mi sitio diciendo topnav, mi problema es que div está siempre ahí. No se oculta ni aparece cuando se desplaza hacia abajo.

Este es un enlace a mi sitio web.

Para css no tengo nada configurado para .header1 porque otros div están dentro y deberían ser la altura necesaria para que aparezca .fixedDiv . Y .fixedDiv tiene CSS

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

Sé que estoy cerca de hacer que esto funcione, pero parece que no puedo entender lo que me estoy perdiendo.

¿Por qué no utilizar un fadeIn y fadeOut con setInterval en scroll? Algo en la línea de …

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

Probar $(".header1").position() da TypeError: undefined is not a function .

Parece que estás en el modo no conflictivo debido a WordPress.

Pruebe esto en su lugar:

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

Editar: tiene una etiqueta adicional (al menos, Chrome lo ve). Parece funcionar bien en Firefox.

enter image description here

Así que finalmente lo resolvió, y me encanta, se ve genial

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

No estoy seguro de lo que hace la línea adicional (línea 3), pero de lo que faltaba … Gracias