CODEWITHSUNDEEP
javascript
Christopher
Christopher

Reputation: 2103

Tumblr-like footer

When you have endless scrolling enabled on Tumblr, when you put your mouse at the bottom of your dashboard, the footer fades in. How can I use that technique for my site?

Upvotes: 5

Views: 716

Answers (1)

Ahmed Aman
Ahmed Aman

Reputation: 2393

If you use jQuery library it will be really easy.

Lets assume that you have the following footer div with id="footer" with custom style

<div id="footer" style="position:fixed;bottom:0px;left:0px;margin:0px;width:100%;opacity:0.001">
    <center>StackOverflow | About US | Privacy | Blah Blah Blah | Something </center>
</div>

Then add the following java script

<script type="text/javascript">
   $(document).ready(function() { 
    $('#footer').hover(
        function(){
            $(this).stop().fadeTo('slow',1);
        },
        function(){
            $(this).stop().fadeTo('slow',0.001);
        });

    });
</script>

make sure that you have included the jQuery library, if not just add the following line into your Head section:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Upvotes: 3

Related Questions