How do I stop scrolling div overlapping the footer?

I want to create a scrolling div like the one on ebuyer: http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h

As you can see the div tag stops above the footer. What codes do I use to have an effect like that?

I have recently used the codes below:

---

<style>

#comments {
  float:left;
  width:450px;


}

#comment-wrapper {
  position: relative;
}

#commentWrapper { /* required to avoid jumping */
  left: 450px;
  position: absolute;
  margin-left: 35px;
  width:280px;

}

#comment {
  position: absolute;
  top: 0;
  margin-top: 20px;
  border-top: 1px solid purple;
  padding-top: 19px;
      background:#CCC;
        margin-left:200px;
}

h2 {
  font-family:georgia,serif;
}

#comments ol li {
  border-top: 1px solid purple;
}

#comments ol li:first-child {
  border-top: 0;开发者_开发技巧
}

#comment.fixed {
  position: fixed;
  top: -5px;
}
</style>

    enter code here

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$(function () {

  var msie6 = $.browser == 'msie' && $.browser.version < 7;

  if (!msie6) {
    var top = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
    $(window).scroll(function (event) {
      // what the y position of the scroll is
      var y = $(this).scrollTop();

      // whether that's below the form
      if (y >= top) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
      } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
      }
    });
  }  
});
</script>

    enter code here

<div id="contentproduct">  

  <div id="comment-wrapper">
    <div id="comments">

    </div>

    <div id="commentWrapper">
      <div id="comment">
        <form>
        <p class="formrow"><label for="yourname">Name:</label>
          <input type="text" class="text" id="yourname" name="name" value=""></p>
        <p class="formrow"><label for="yoururl">URL:</label>
          <input type="text" class="text" id="yoururl" name="url"></p>
        <p class="formrow"><textarea rows="10" cols="35" name="body"></textarea></p>
        <p><input type="button" value="Preview comment"></p>
        </form>
      </div>
    </div>
  </div>

What more do I need to add to avoid the comment box overlapping the footer?

---

First of all, position:fixed does the trick. And then they use js to control this css property of the sidebar: when it's far enough to the top, set its position as fixed.