div with position-fixed (to bottom) - stop when hitting footer

Question

I have already quite advance in solving my problem using a solution I have found in another post: https://stackoverflow.com/a/8653109/1567848 - but am still not able to make it work on a real page. It would only work within JSFiddle.

Here is my already quite complete example and it work exactly the way I want: http://jsfiddle.net/enULV/ (why won't it work on a real page?). - my guess is that there is a problem with the JavaScript, but my JS is quite poor and I would be very thankful for some help.

Perhaps another solution could be to determine a certain amount of pixel from the bottom, creating a limit for the #footer_border not to overlap the #footer. (Just another random idea - I would actually prefer to get this other method working.)

Besides, I would like the HTML-Markup and CSS to stay just the way they are (for that it how the page is constructed with all its content, in which I wish in include this script).

Thank you very much in advance.

Answer 1

Perhaps this can be a better sample. The HTML and CSS codes are based on your original question. The long content sample is wrapped in a DIV just to give an impression of content that's longer than browser window height. You can replace its entire DIV container with plain text or anything.

function checkOffset() {
  var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
    $('#social-float').css('bottom', '10px');
  } else {
    $('#social-float').css('bottom', (10+(a-b))+'px');
  }
}
$(document).ready(checkOffset);
$(document).scroll(checkOffset);

#social-float {
  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 55px;
  padding: 10px 5px;
  text-align: center;
  background-color: #fff;
  border: 5px solid #ccd0d5;
  border-radius: 2px;
}
#footer { height: 5em; background: #888; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<div style="height:1000px">long content sample</div>
<div id="social-float">
  <div class="sf-twitter">twitter</div>
  <div class="sf-facebook">facebook</div>
  <div class="sf-plusone">plusone</div>
</div>
<div id="footer">footer sample</div>

Answer 2

There's no problem with the script. It's just a matter of placing #footer_border either position:absolute or position:fixed. Fixed makes it positioned relative to the browser window, while absolute makes it relative to the first positioned (not static) ancestor element (in your case, #wrapper).

I've made your #wrapper and #footer_border 380px so you can easily check it from within the jsfiddle frames. Placed auto margins on your #footer_border to make sure it's centered despite being position:fixed, then removed left:0. Check the updated jsfiddle here:

http://jsfiddle.net/enULV/23/

I know this question is almost a year old now, but I hope this still helps.