3

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.

Community
  • 1
  • 1

3 Answers3

0

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.

enter image description here

Community
  • 1
  • 1
irrelephant
  • 4,091
  • 2
  • 25
  • 41
0

Why not just use a fadeIn and fadeOut with setInterval on scroll? Something along the lines of...

.scroll( function()
{
    if($(".fixedDiv").css('display', 'none'))
    {
        $(".fixedDiv").fadeIn("normal", function()
        {
            setInterval( function() { $(".fixedDiv").fadeOut("normal"); }, 1500 );
        });
    }
}
  • From my understanding if your wordpress is in nonconflict mode than you could use jQuery(selector) instead of $(selector). –  Dec 27 '12 at 07:06
0

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