How to stop a fixed floating element on #footer?

Question

Below is the code that I use to fix the sidebar as the user scrolls. At the moment, it is overlapping with my footer. How can I stop him at a certain moment or when he has reached the footer?

<script type="text/javascript"> $(document).ready(function() { if ($('.pageheaderwrap').length) { $(window).scroll(function() { if ($(this).scrollTop() > 362) { $(".sidebar-left").css({ "position": "fixed", "top": 0 }); } else { $(".sidebar-left").css({ "position": "absolute", "top": "255px" }); } }); } else { $(window).scroll(function() { if ($(this).scrollTop() > 230) { $(".sidebar-left").css({ "position": "fixed", "top": 0 }); } else { $(".sidebar-left").css({ "position": "absolute", "top": "125px" }); } }); } }); </script> 

Answer 1

Here is something that might work for you:

http://jsfiddle.net/y3qV5/7/

The jquery plugin that does this sets up elements that capture any stock from the top of the page. With an extra limit, it will block the item and continue scrolling up the page, keeping it from the footer. You must set a limit on the top of the footer, as well as on the height of what will be in your target element.

The code for this script is used here (fiddle above):

 $(document).ready(function() { $('#cart').scrollToFixed({ marginTop: 10, limit: $('#footer').offset().top }); }); 

Here is a link to the plugin and its source:

https://github.com/bigspotteddog/ScrollToFixed

Answer 2

Why not remove all javascript and do it with CSS:

 .sidebar-left { position: fixed; bottom: 20px; /* height of your footer */ }