Make div appear on scroll in wordpress

Question

I can't seem to figure this one out.. I'm sure it's something simple. My goal is to make a solid filled div slide down form the top of viewport once the user has scrolled down a bit. I've implemented this before in a basic page but I cannot seem to get it to work in wordpress. Here is the code I'm using:

<script type="text/javascript">  

$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 50) {
        $('.slide').slideDown();
    } else {
        $('.slide').slideUp();
    }

});

</script>

The div is positioned at the top, the css is:

.slide {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.97);
    z-index: 1;
}

When I remove display: none it displays, so I know this isn't an issue with the z-index. I had no luck when placing the script in the footer. Any ideas? Thanks!

Do you have any other elements with an higher z-index? If so, try to set the z-index to 100 for example. — mathf, Aug 08 '14 at 19:22
No, like I said, on the current z-index of 1, when I remove 'display: none' the div appears where I want it to be. I don't think this is an issue with my html or css. I think I am just putting the script in the wrong place or calling it incorrectly. I'm new to wordpress development so it's super frustrating! — jjoshua, Aug 08 '14 at 19:31

score 0 · Accepted Answer · answered Aug 08 '14 at 19:29

0

With this much info, my guess is this happens because of WordPress using noconflict.
Try modifying your code like that:

<script type="text/javascript"> 
jQuery(function($) {
    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 50) {
            $('.slide').slideDown();
        } else {
            $('.slide').slideUp();
        }

    });
});
</script>

answered Aug 08 '14 at 19:29

Kaloyan

7,262
4
32
47

Hey thanks for the input! Where should I place this in wordpress? – jjoshua Aug 09 '14 at 06:14
You can check http://codex.wordpress.org/Function_Reference/wp_enqueue_script . It's important to note the `$deps` part, it should be set to `array('jquery')` to make sure jQuery is included before your script runs. – Kaloyan Aug 09 '14 at 09:07

Lenin Hernandez · Answer 2 · 2018-07-16T22:55:41.390

put on header.php

<script type="text/javascript" >

jQuery(document).scroll(function() {
    if ( jQuery(this).scrollTop() > 300) {
        jQuery('.home-link').fadeOut(1500);
        jQuery('.nav-menu a').css({ "font-weight": "bold"});
    } else {
        jQuery('.home-link').fadeIn();
        jQuery('.nav-menu a').css({ "font-weight": ""});
    }
});

</script>

beetwen <?php wp_head(); ?> and </head>

More explained here (Spanish):

Como ocultar la cabecera de pagina WordPress al hacer Scroll + Video

Make div appear on scroll in wordpress

2 Answers2

Linked