在我的布局中,我创建了以下 jsfiddle 托管的可调整大小的粘性页脚。但是,在调整大小时它与内容重叠。有没有办法让它在所有浏览器上都能响应?
$(function () {
$('.footer').resizable({
handles: 'n, s'
}).bind('resize', function(){
$(this).css("top", "auto");
});
});
<div class="footer">
<p> footer content here </p>
</div>
CSS:
.footer {
color: #ffffff;
position: fixed !important;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
z-index: 1000;
height: 60px;
background-color: #333333;
}
最佳答案
是否需要重新调整大小?尝试了禁用方法,但由于某种原因它不起作用。让它停在上面的内容上。这有什么好处吗? JS FIDDLE
$(function () {
var topheight = $('#top').height();
var topoffset = $("#top").offset();
var topbottom = topoffset.top + topheight;
$('.footer').resizable({
handles: 'n, s'
}).bind('resize', function(){
$(this).css("top","auto");
var footeroffset = $(this).offset();
var footerheight = $(this).height();
var footerBottom= footeroffset.top + footerheight;
$("#res").html(topbottom+" "+footeroffset.top);
if(topbottom + 50 >= footeroffset.top){
$('#res').html("should disable");
$('.footer').resizable("destroy");
}
});
});
关于javascript - 可调整大小的粘性页脚与内容重叠 - 修复,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26753953/