Creating a Scroll Follow function but need to prevent it from overlapping the Footer Div

Question

I've created a function that changes the 'position' of a DIV to 'fixed' after a certain point of scroll. The purpose is to keep it visible on the screen while page is scrolled. Works great (although not in IE6).

Problem is that when I get to the bottom of a page, I don't want the DIV to overlap the footer. I'm guessing I'll need to change the 'position' from 'fixed' to 'absolute', setting the 'bottom' property to something slightly greater then the height of the footer.

It's best to test this issue on this page. Make sure that your window is resized a littler smaller so that you can see the sidebar overlapping the footer.

Here's my code so far :

 $(document).ready(function(){

  var element = $("#sidebar");
  var window_height = $(window).height();
  var element_height = element.height();

  // On scroll, set or unset the fixed position
  $(window).scroll(function() { 
    if (window_height > element_height) {
      if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
      }
      else {
        element.css("position","relative");
        element.css("top","0");
        element.css("padding-top","57px");      
      }
    }
    else {
      element.css("position","relative");
      element.css("top","0");
      element.css("padding-top","57px");
    }
  });

  // On window resize, set or unset the fixed position
  $(window).resize(function(){
    window_height = $(window).height();
    if (window_height > element_height) {
      if ($(document).scrollTop() > 220) {
          element.css("position","fixed");
          element.css("top","9px");
          element.css("padding-top","0");
        }
        else {
          element.css("position","relative");
          element.css("top","0");
          element.css("padding-top","57px");      
        }
    }
    else {
      element.css("position","relative");
      element.css("top","0");
      element.css("padding-top","57px");
    }
  });

});

Answer 1

i don't know if my quess is right but maybe you shoukd contain your menu DIV inside other DIV and limit menuDIV movement to bounds of its outer DIV

Other way might be using this solution http://www.dogfeeds.com/?p=264

I hope this helps

MTH

Answer 2

Thank you for your responses!

I ended up implementing this as a solution:

 $(document).ready(function(){

  var element = $("#sidebar");
  var window_height = $(window).height();
  var element_height = element.height();

  $(window).scroll(function() { 
    if (window_height > element_height) {
      if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
        element.css("position","absolute");
        element.css("top", "auto");
        element.css("bottom","-60px");
      }
      else if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
        element.css("bottom","auto");
      }
      else {
        element.css("position","relative");
        element.css("top","auto");
        element.css("padding-top","57px");
        element.css("bottom","auto");    
      }
    }
    else {
      element.css("position","relative");
      element.css("top","auto");
      element.css("padding-top","57px");
        element.css("bottom","auto");
    }
  });

  $(window).resize(function(){
    window_height = $(window).height();
    if (window_height > element_height) {
      if (($(document).scrollTop() + element.height()) > ($(document).height() - $("#footer").height() - 9)) {
        element.css("position","absolute");
        element.css("top", "auto");
        element.css("bottom","-60px");
      }
      else if ($(document).scrollTop() > 220) {
        element.css("position","fixed");
        element.css("top","9px");
        element.css("padding-top","0");
        element.css("bottom","auto");
      }
      else {
        element.css("position","relative");
        element.css("top","auto");
        element.css("padding-top","57px"); 
        element.css("bottom","auto");     
      }
    }
    else {
      element.css("position","relative");
      element.css("top","auto");
      element.css("padding-top","57px");
        element.css("bottom","auto");
    }
  });

});