Question

I want a div to appear at the top when user scroll down pass a div class called .header1 (This div has 3 other div inside)

I want the nav to appear in that .fixedDiv. I found my answer here, but I have not been able to implement it on my site.
Here is what I got

<script type="text/javascript">
    var startY = $('.header1').position().top + $('.header1').outerHeight();
    $(window).scroll(function () {
        if( $(this).scrollTop() > startY ){
            $('.fixedDiv').slideDown();
        }else{
            $('.fixedDiv').slideUp();
        }
    });
</script>

And I have a div called .fixedDiv on my site saying topnav, my problem is the div is always there. It doesn’t hide or appear when scrolling down.

This is a link to my website.

For css I have nothing setup for .header1 because other div are inside and they should be the height needed for .fixedDiv to appear. And .fixedDiv has css

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

I know I’m close to getting this working but I just can’t seem to figure out what I’m missing.

Answer 1

So finally got it figured out, and I love it, it looks great

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

Not sure what the extra line (line 3) does but that what was missing …
Thank You