3

I'm trying to make it so when you load a page a div is sticking to the bottom of it. Then when a user scrolls down it sticks to the top.

I can do the stick to the top part using a sticky element.

<div id="container">
<div id="menu">
    <ul>
        <li><a href='#test'>Line 1</a></li>
        <li><a href='#'>Line 2</a></li>
        <li><a href='#'>Line 3</a></li>
    </ul>
</div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $(window).scroll(function(){
           if($(this).scrollTop()>=660)
           {
           $('#menu').addClass('fixed');
           }else{
               $('#menu').removeClass('fixed');
           }
                   });
    });
    </script>

I just can't do it so it sticks to the bottom on load. I've attached a little mockup if it's unclear.

Sticky

Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
Michael
  • 515
  • 2
  • 13
  • 25

1 Answers1

9

UPDATED.
Here is working jsFiddle to examine.

jQuery:

$(document).ready(function() {
    var windowH = $(window).height();
    var stickToBot = windowH - $('#menu').outerHeight(true);
    //outherHeight(true) will calculate with borders, paddings and margins.
    $('#menu').css({'top': stickToBot + 'px'});

    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > stickToBot ) {
            $('#menu').css({'position':'fixed','top' :'0px'});
        } else {
            $('#menu').css({'position':'absolute','top': stickToBot +'px'});
        }
    });
});​

Note: if you want to go further, i suggest to inspect this answer too:

Setting CSS value limits of the window scrolling animation

Community
  • 1
  • 1
Barlas Apaydin
  • 7,233
  • 11
  • 55
  • 86
  • how do I ensure it's always at the bottom of a browser? A bit like a sticky footer. – Michael Aug 16 '12 at 09:22
  • You shall recalculate `var windowH = $(window).height();` and adjust the handler on resize (and +1) – Balint Bako Jun 26 '13 at 11:32
  • Any idea why the content of the website would show up and then disappear after the page loaded all the way? As soon as I scroll everything shows back up...it only happens when I have this script in place. – cschneider27 Oct 24 '13 at 13:41
  • http://duohost.us/hsba/website/ I have determined it only seems to be happening in Firefox (I have 24) – cschneider27 Oct 24 '13 at 20:30
  • i think this bug is'nt relative with stick function because i inspect that first div.row pushes the content. try to remove first one, push the content area with margin @cschneider27 – Barlas Apaydin Oct 24 '13 at 21:56