Change the extreme position of a fixed position element after reaching the bottom of the page?

Question

I need to change the top edge of a fixed div element from margin-top: 200px to the top edge of 0px after reaching the bottom of the page (or 200px from the bottom) using a vertical scrollbar.

And switch back if you scroll up.

I assume javascript / jQuery code does this.

my html / layout code:

<div id="header" style="position: fixed; margin-top: 0px;"> Header content </div> <div id="main"> <div id="left" style="position: fixed; margin-top: 200px;">Google Ads here</div> <div id="right">Content posts here</div> </div> <div id="footer"> Footer content </div> 

EDIT: here are some images to make my question clearer.

• normal state when loading the page:

• when scrolling down and the google ads column conflicts with the footer:

• how to solve it:

Answer 1

Derfder ...

Voila, my proposed solution:

http://jsfiddle.net/YL7Jc/2/

The animation twitched slightly, but I think it does what you want

(This is my post on an earlier post / post:
Can I keep the DIV always on the screen, but not always in a fixed position? )

Let me know what you think!

Answer 2

Try entering the code that attaches the event to window.scroll to see if the page hits the bottom (bottom 200 pixels) and moves #left up ( margin-top: 0 ) ..

DEMO: http://jsfiddle.net/6Q6XY/4/ (added demo code to see when it gets to the bottom.)

 $(function() { var $left = $('#left'); $(window).bind('scroll', function() { if (($(document).height() - (window.pageYOffset + window.innerHeight)) < 200) { $left.css('marginTop', 0); } else { $left.css('marginTop', 200); } }); }); 

Link: fooobar.com/questions/521047 / ...

Answer 3

You need to implement the window scroll function, this is a jquery implementation, so please make sure you include the latest jquery libaries

 $(window).scroll(function () { if ($(window).scrollTop() + $(window).height() == $(document).height()) { //if it hits bottom $('#left').css("margin-top", "0px"); } else { $('#left').css("margin-top", "200px"); } }); 

Answer 4

HTML

 <div id="main" style="width: 960px; margin: 0px auto;"> <div id="left" style="position: fixed; top: 200px; left: 0px; background: #000; width: 100%; color: #fff;">Google Ads here</div> <div id="right"></div> </div> 

JAVASCRIPT

 <script type="text/javascript"> $(function() { var documentHeight = $(document).height(); var windowHeight = $(window).height(); var left = $('#left'); var leftTopPosition = $('#left').css('top'); leftTopPosition = parseInt(leftTopPosition.substring(0, leftTopPosition.length-2)); $(window).scroll(function(){ var pageOffsetY = window.pageYOffset; if((documentHeight - pageOffsetY - windowHeight) <= 200 && leftTopPosition == 200) { left.stop().animate({ 'top': '0px' }); leftTopPosition = 0; } else if((documentHeight - pageOffsetY - windowHeight) > 200 && leftTopPosition == 0) { left.stop().animate({ 'top': '200px' }); leftTopPosition = 200; } }); }); </script> 

Answer 5

Hi First, you had to be clearer first of all before you tag people, as each one gives similar answers, and then shows that the question is not clear.

See Js Fiddle for a potential fix, please adjust as you need with pixels, etc.

Answer 6

Try something like this

  if ($(window).scrollTop() == $(document).height() - $(window).height()) { document.getElementById(yourid).setAttribute("style","margin-top:0px"); } 

Answer 7

Try the following:

 $(window).bind('scroll', function(){ if(($(window).height()-$(window).scrollTop())<200) { $('#left').css('margin-top',$(window).scrollTop()); } else { $('#left').css('margin-top',200); } });