Search code examples
jquerycssscrollfixed

Content fixed at the bottom


$(window).scroll(function(){
    $("#theFixed").css("bottom",Math.max(0,250-$(this).scrollTop()));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<div id="theFixed" style="position:fixed;top:250px;background-color:red">SOMETHING</div>

STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

... almost works, but the height of the theFixed changes on scroll, how do I fix it?

Edit: maybe I wasn't clear, I don't need the content to be fixed at the bottom of the 'window' or the outer container, I could use CSS for that.


Solution

  • You could set the desired height explicitly using CSS height property:

    $(window).scroll(function() {
      $("#theFixed").css("bottom", Math.max(0, 250 - $(this).scrollTop()));
    });
    #theFixed {
      height: 20px;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <div id="theFixed" style="position:fixed;top:250px;background-color:red">SOMETHING</div>
    
    STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>STUFF
    <BR>

    Also, not related to your problem, but as general advice: when you register an event listener for events such scroll, resize etc. you usually want also to debounce the event handler execution, so that the UI remains responsive to others kind of event.

    More about event debouncing.