如何停止滚动div重叠页脚？

Question

我想创建一个滚动的div像ebuyer之一： 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。