Making Nav Div Appear When Scrolling Down

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.

score 0 · Answer 1 · edited May 23 '17 at 12:27

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

edited May 23 '17 at 12:27

Community

1
1

answered Dec 27 '12 at 03:59

irrelephant

4,091
2
25
41

Is there a way to change wordpress mode maybe ? – Philippe Allaire Dec 27 '12 at 04:12
@PhilippeAllaire You're missing a `.top` on your website. (It's `startY=jQuery(".header1").position().top + ...`) You also need to change all the other `$`s below that line to `jQuery`. – irrelephant Dec 27 '12 at 04:13
@PhilippeAllaire You can use the `(function($){ ...` code in my answer to treat `$` as `jQuery`. – irrelephant Dec 27 '12 at 04:14
Really appreciate your help, I have change all the $ into jQuery and I have added the .top , but it's still not working for me :( – Philippe Allaire Dec 27 '12 at 04:20
@PhilippeAllaire Your website still doesn't have a `.top` or `jQuery`s in place of `$`. – irrelephant Dec 27 '12 at 04:33
I have cleared the cache for you, sorry but as admin I don't get the cache files ... – Philippe Allaire Dec 27 '12 at 04:34
1

@PhilippeAllaire You appear to have an extra ` – irrelephant Dec 27 '12 at 04:36
I found an extra tag below the code ? but again this had no effect :( Last guy said jQuery not loaded on site ? Is this tru ? I did not find extra – Philippe Allaire Dec 27 '12 at 04:42
1

@PhilippeAllaire There shouldn't be an extra ``, but an extra ` – irrelephant Dec 27 '12 at 04:42
I have searched the header.php file and I cannot find an extra – Philippe Allaire Dec 27 '12 at 04:47
1

@PhilippeAllaire Right above `var startY= jQuery(".header1").position().top + ...` - see updated answer – irrelephant Dec 27 '12 at 04:49
I'm sorry but I have examine page source from firefox and there is only one – Philippe Allaire Dec 27 '12 at 04:53
@PhilippeAllaire Oh, Firefox appears to parse it just fine. Try my updated answer. – irrelephant Dec 27 '12 at 04:59
.... I am having no luck with this issue :( I have implemented the updated code from above with no effect still .... frustrating lol – Philippe Allaire Dec 27 '12 at 05:06
@PhilippeAllaire Try it without the `$`s and with the `jQuery`s. and take out the `$` in `function($)`. – irrelephant Dec 27 '12 at 05:39
Done, but still not working ... I;m sure your a buzy man and I don't want to bother you to much, so I'm going to hire someone from fiverr and see if they can maybe fix it, I will update this thread if they can figure it out ... Unless you have a better idea ... – Philippe Allaire Dec 27 '12 at 05:45

score 0 · Answer 2 · answered Dec 27 '12 at 04:10

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

answered Dec 27 '12 at 04:10

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

score 0 · Accepted Answer · answered Dec 28 '12 at 04:28

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

Making Nav Div Appear When Scrolling Down

3 Answers3

Linked