Switch div from fixed to absolute at bottom of browser

Question

Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.

The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.

js fiddle DEMO

Updated js fiddle DEMO

HTML

<div id="header-block">
    Header-block, this sits here in the background
</div>

<div id="content">
    <div id="work">
        This content should be fixed when at the top
    </div>
    <div id="description">
        This content should scroll -
    </div>

</div><!-- end content -->

<div id="footer">
    This should appear at the bottom
</div>

CSS

body {
    margin: 0px;
    padding: 0px;
}
#header-block {
    background: green;
    width: 100%;
    position: fixed;
    z-index: 1;
    height: 300px;
    top: 0;
}
#content {
    margin-top: 300px;
    width: 100%;
    position: relative;
    z-index: 2;
}
#work {
    background: red;
    width: 50%;
    height: 100vh;
    float: left;
    position: absolute;
}
#description {
    background: blue;
    width: 50%;
    height: 1200px;
    float: right;
    font-size: 30px;
}
#footer {
    background: black;
    width: 100%;
    height: 100px;
    position: absolute;
    z-index: 3;
    bottom: 0;
}

score 4 · Accepted Answer · edited May 23 '17 at 11:45

If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).

// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize  = $("#content").height() ;

window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;

        // calculate the position of the footer and the actual seen window            
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $("#footer").offset().top;

         if ( position > 300 && !(docViewBottom >= elemTop)) {
             $('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
          } else {
              // if the footer is visible on the screen
              if(docViewBottom >= elemTop) {
                 $('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer       
              } else {
                  $('#work').css({'position':'relative', 'top': 'auto'}) ;
              }
         }

    }
}

For further informations about the calculations, perhaps this question on stackoverflow is useful.

Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.

If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.

Great!! This is the desired effect I was after, going to test in full now :) — Rob, Jan 27 '14 at 18:50

TimSPQR · Answer 2 · 2014-01-26T13:23:43.703

2

I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.

CSS

.clearboth {
    clear: both;
}

This is a drawing of what I see on your fiddle;

enter image description here

Do you want the red and the blue to always be touching the black?

I don't see the red overlying the black

edited Jan 26 '14 at 13:23

answered Jan 25 '14 at 13:28

TimSPQR

2,964
3
20
29

Thanks @TimSPQR. This is almost what I'm after however I wanted the red #work div to scroll up as the footer reveals. I've updated the jsfiddle with your comment – Rob Jan 25 '14 at 16:03
I guess I'm not understanding what you want the red div to do. When I scroll down the page, the red div scrolls up, and ultimately you see the footer. – TimSPQR Jan 25 '14 at 17:30
Yep, the red div should be fixed until you reach the footer. The red div should then scroll up as the footer reveals. Hope that makes sense. – Rob Jan 25 '14 at 21:27
Hmmm...not getting it. (1) Fixed green div at the top (2) two floated divs in the middle that scroll up and down (red and blue) - their tops will always stay together (3) black footer at the bottom that will always be at the bottom and be seen only when scrolling to the bottom. There is a space between the red div and the footer and no space between the blue div and the footer. So what do you want to happen when the user scrolls to the bottom and the top of the footer is seen? – TimSPQR Jan 25 '14 at 21:35
I don't want the black footer to overlay the red block, that it is currently doing, but the red block to scroll relative to the footer. – Rob Jan 26 '14 at 11:51

score 2 · Answer 3 · answered Jan 27 '14 at 15:54

You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.

You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().

This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.

score 0 · Answer 4 · answered Feb 02 '14 at 18:40

Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.

<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
        $(window).scroll(function () { 

                console.log($(window).scrollTop());

                if ($(window).scrollTop() >= 322) {

                    $('#footer').css("z-index","1");
                    $('#work').css(
                    {
                        "background": "red",
                        "width": '50%',
                        'height': '100vh',
                        'float': 'left',
                        'position': 'fixed',
                        'top': '0'
                    });
                }

                if ($(window).scrollTop() <= 322) 
                {
                    $('#work').css(
                    {
                        "background": "red",
                           "width": "50%",
                           "height": "100vh",
                           "float": "left",
                           "position": "absolute"
                    });
                };



        });

});
</script>

score 0 · Answer 5 · answered Feb 03 '14 at 12:08

If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.

There's plugin that can do it. Skrollr

You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.

Switch div from fixed to absolute at bottom of browser

5 Answers5

Linked