How to properly write scrollTop javascript in Blogger?

Question

I am trying to create a scrolling fixed footer for my Blogger blog (a fixed footer which will not be visible on top but will be visible when the page is scrolled down).

I have searched countless times on Google how to create one. Now, I have found an answer, which can be found on StackOverflow link, which is actually an answer to another question, or the code is below:

<style>
        #fixedfooter {
            position:fixed;
            left:0px;
            bottom:0px;
            height:100px;
            width:100%;
            display:none;
        }
</style>
<div id="fixedfooter">Contents here will not be visible on top of the page, but will appear when scrolled down 200px.</div>
<script type='text/javascript'>
    $(window).scroll(function() {
            if ($(this).scrollTop() < 200) {
                $("#fixedfooter").hide();
            }
            else {
                $("#fixedfooter").show();
            }
        });
</script>

This is workable on jsFiddle, but when I tried it on Blogger, it won't. I tried the answers located here but nothing seemed to work.

I tried putting the javascript inside the HTML by this:

<script type='text/javascript'>
//<![CDATA[

$(window).scroll(function() {
    if ($(this).scrollTop() < 200) {
        $("#fixedfooter").hide();
    }
    else {
        $("#fixedfooter").show();
    }
});    
</script>

but it still doesn't work.

I tried to put the javascript in a HTML gadget in Layout, but still, no results.

How should I go about doing this? It would surely help me big time. Thank you for any ideas!

Answer 1

Your code is ok. Just do this:

<script type='text/javascript'>

//<![CDATA[......
some code here 


//]]></script>

Done!