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>