Switch div from fixed to absolute at the bottom of the browser

Question

I am trying to add a footer at the bottom of this content that does not overlay the content, but move it.

The only way I can work is to use something like this: when the browser is below, delete the “fixed” class on the left with 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; } 

Answer 1

If I understand your question correctly, this should do the trick (although, unfortunately, it is very dependent on JavaScript).

 // 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 more information about the calculations, maybe this question at https://stackoverflow.com/a/9/9/9/ is helpful.

Edit: Andrew Haining posted his answer in between my answer, maybe try its link and maybe this is the best (more correct) solution. Unfortunately, I did not update this page when I tested your code in JSFiddle, and I did not see its answer.

If you want to use my script, make sure you can test it with different permissions. It is great for my resolution in JSFiddle, I have not tested others.

Answer 2

I'm not 100% sure what you want, but if you remove position: absolute and bottom: 0 from the footer and place the 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 violin;

Do you want red and blue to always touch black?

I do not see red over black

Answer 3

You should use jQuery to add a class containing position:fixed when the scroll position of the page is less than the inline position of div #work . Once it scrolls past the position, delete the class and return the item to the string.

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

This tutorial will give you an idea of ​​what you need to do to achieve the desired results, you just need to slightly change the calculation using $(window).height() , $('#footer').height() and a few more changes to get what you want.

Answer 4

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 will be absolute when it is below the top for scrolling, and the black footer should be below the red when scrolling, check this code I made 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 5

If it is not parallax, it is somewhat close to how parallax works, containers move at different speeds, and some containers sit motionless or scroll when they reach a certain upper / lower offset in the viewport.

There is a plugin that can do this. Skrollr

You can use Skrollr together with skrollrcss , and it will monitor how the containers occupy a position on the screen based on the scrolltop of the window and the container specifically.