Correct way to load this JS into wordpress page

Question

I am trying to make it so that a div fades out once you have scrolled down the page. Im using this fiddle which works, however I cannot get it to work when I load it into a single wordpress page.

I tried adding the following in the text editor:

 <div class="bottomMenu"></div> <script type="text/javascript"> $(document).scroll(function () { var y = $(this).scrollTop(); if (y > 800) { $('.bottomMenu').fadeIn(); } else { $('.bottomMenu').fadeOut(); } }); </script> 

The div shows (I haven't included the CSS here), however I cannot get the JS working. sorry if this has been asked before, but I couldn't find an exact answer on the best way to do it in WP.

Answer 1

Add jQuery library:

<div class="bottomMenu"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).scroll(function () {
    var y = $(this).scrollTop();
    if (y > 800) {
        $('.bottomMenu').fadeIn();
    } else {
        $('.bottomMenu').fadeOut();
    }

});
</script>