我有一个div具有position:fixed;，否则在向下滚动的某个时间它具有position:absolute;。
我的问题是 div 的 position:fixed; 取决于页脚的顶部。然而，我的页脚顶部发生了变化，但我的 div 应该“固定”的部分的限制没有变化。也许代码会更清晰:
html:
<div id="header" style="height:500px; width:800px; border: 5px solid green; " >
header
</div>
<div id="top" style="height:3000px; width:800px; border: 5px solid yellow; " >
<button onclick="ReduceSize()"> Reduce size </button>
<div id="comment" style="padding-bottom:30px; height:700px; width : 300px; margin-left:30px; border: 5px solid orange;" >
</div>
</div>
<div id="bottom" style="height:3000px; width:800px; border: 5px solid green; " >
footer
</div>
js:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'>
</script>
<script>
function ReduceSize() {
var obj = document.getElementById('top');
obj.style.height = "750px";
}
$(document).ready(function () {
var haut = $('#comment').offset().top;
var hautBottom = $('#bottom').offset().top - parseFloat( $('#comment').css('height').replace(/auto/, 0) ) ;
$(window).scroll(function (event) {
var y = $(this).scrollTop();
if( (y >= (haut-20) ) && (y < hautBottom ) ) {
$('#comment').css({ position: 'fixed', top:20 });
}else{
if(y >= haut){
$('#comment').css({ position: 'absolute', top:hautBottom });
}
if(y < hautBottom ){
$('#comment').css({ position: 'absolute', top:parseFloat( $('#top').offset().top) });
};
};
});
});
</script>
提前致谢。
最佳答案
我并不是 100% 清楚你想要实现什么，但我认为就是这样:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script>
function ReduceSize() {
$(content).css('height', '600px');
set_comment_position();
}
function set_comment_position(){
var header = $('#header');
var comment = $('#comment');
var footer = $('#footer');
var scroll = $(window).scrollTop();
var header_height = header.outerHeight();
var comment_height = comment.outerHeight();
var comment_distance_top = header_height - scroll;
var footer_offset_top = footer.offset().top;
var footer_distance_top = footer_offset_top - scroll;
var comment_distance_footer = footer_distance_top - comment_height;
if (comment_distance_top <= 0) {
if (comment_distance_footer > 0) {
comment.css({
position: 'fixed',
top: '0px',
bottom : 'auto'
});
} else {
comment.css({
position: 'absolute',
top: 'auto',
bottom: '0px'
});
}
} else {
comment.css({
position: 'absolute',
top: '0px',
bottom : 'auto'
});
}
}
$(document).ready(function(){
set_comment_position()
});
$(window).scroll(function(){
set_comment_position();
});
</script>
</head>
<body>
<div id="header" style="height:100px; width:800px; background-color: lightgreen; " >
header
</div>
<div id="content" style="height:800px; width:800px; background-color: lightgrey; position: relative;" >
<div id="comment" style="height:400px; width : 300px; background-color: orange; position: absolute; top: 0px;" >
comment
<button onclick="ReduceSize()"> Reduce size </button>
</div>
</div>
<div id="footer" style="height:800px; width:800px; background-color: lightgreen; " >
footer
</div>
</body>
</html>
重点是将定位逻辑包装到一个单独的函数中，并在 docready、滚动和调整大小时调用此函数。
关于javascript - 如何重新加载函数(事件)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45639146/