Make div appear on scroll in wordpress

admin

Administrator
Staff member
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:

Code:
<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:

Code:
.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!