javascript - 如何停止滚动与页脚重叠的 div？

Question

我想创建一个像 ebuyer 上那样的滚动 div: http://www.ebuyer.com/197546-gigabyte-ga-890gpa-ud3h-890gx-socket-am3-hdmi-dvi-vga-out-8-channel-audio-ga-890gpa-ud3h

如您所见，div 标记停在页脚上方。我使用什么代码来产生这样的效果？

我最近使用了以下代码:

---

<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>

我还需要添加什么来避免评论框与页脚重叠？

Answer 1

首先，position:fixed 可以解决问题。然后他们使用js来控制侧边栏的这个css属性:当它足够远到顶部时，将其位置设置为fixed。