【问题标题】:How to make DIV absolute+fixed?如何使DIV绝对+固定?
【发布时间】:2012-11-24 19:50:03
【问题描述】:

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

【问题讨论】:

标签: html scroll fixed absolute scrollable


【解决方案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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-07-23
    • 1970-01-01
    • 2015-07-28
    • 1970-01-01
    • 1970-01-01
    • 2015-03-11
    • 2020-12-08
    相关资源
    最近更新 更多