[英]How do I stop scrolling div overlapping the footer?
我想在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>
为了避免注释框与页脚重叠,我还需要添加什么?
首先, position:fixed
可以解决问题。 然后他们使用js来控制侧边栏的css属性:当顶部足够远时,将其位置设置为fixed
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.