如何让DIV绝对+固定?

时间:2012-12-06 17:48:09

标签: html scroll fixed absolute scrollable

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

1 个答案:

答案 0 :(得分:1)

在关闭标题之前放置此代码:

<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>