html - 如何使DIV绝对+固定？

Question

我想制作可以向下滚动的绝对 DIV，直到它到达页面顶部，然后它应该变得固定并保持在顶部，直到页面再次向上滚动。

Answer 1

将此代码放在关闭 head 标签之前：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
$(function() {
var top = $('.div').offset().top;
function scroll(){
var scroll = $(window).scrollTop(); 
if (scroll > top) { 
$('.div').css({ 'position': 'fixed', 'top':0 });
} else {
$('.div').css({ 'position': 'absolute','top': top }); 
} 
};
$(window).scroll(function() {
scroll();
});
});

</script>
<style>

body {height: 1000px;}
.header {height: 200px;}
.div {position: absolute;}

</style>

并在正文中使用此代码：

<div class="header">Header or logo company</div>
<div class="div"> text or menu or other </div>