Making Nav Div Appear When Scrolling Down

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 an

Solution 1:

Testing $(".header1").position() gives TypeError: undefined is not a function.

You appear to be in noConflict mode due to WordPress.

Try this instead:

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

---

Edit: you have an extra <script> tag (at least, Chrome sees it). It appears to work fine in Firefox.

Solution 2:

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