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,

Answer 1

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.

Answer 2

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>

Answer 3

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;

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

I don't see the red overlying the black

Answer 4

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.

Answer 5

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.