马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.pg-header{
background-color: #2e6ab1;
color: black;
height: 60px;
width: 100%;
}
.pg-body{
}
.pg-body .menu{
background-color: #6ce26c;
position: absolute;
top:60px;
bottom: 0;
left:30px;
width: 80px;
}
.pg-body .content{
background-color:yellow;
position: absolute;
top:60px;
right: 30px;
left:120px;
}
.pg-body .content .content-item{
height: 500px;
}
.fix{
position: fixed;
top:10px;
color: red;
}
.active{
background-color: blue;
}
</style>
</head>
<body>
<div class="pg-header">内容</div>
<div class="pg-body">
<div class="menu" id="i1">
<div class="menu-item">第一章</div>
<div class="menu-item">第二章</div>
<div class="menu-item">第三章</div>
</div>
<div class="content">
<div class="content-item">第一章内容</div>
<div class="content-item">第二章内容</div>
<div class="content-item">第三章内容</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.5.0.js"></script>
<script>
$(function () {
Init();
});
function Init() {
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if(scroll>60){
$('.menu').addClass('fix');
}else {
$('.menu').removeClass('fix');
}
})
}
</script>
</body>
</html>
其中的 $('.menu').addClass('fix');
为什么不能把菜单固定在窗口的相对位置上，字体还是会变红
然后把 .fix 样式改成 .pg-body .menu.fix 就可以固定，这是什么原因啊。。。
求助各位大佬。。
要想知道答案，鱼油需要知道：文档流和 BFC
文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指 BFC 中的 FC 。
FC 是 formatting context 的首字母缩写，就是是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
常见的 FC 有 BFC、IFC，还有 GFC 和 FFC。
BFC 是 block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-4-23 22:45:49
置顶卡
千斤顶
显身卡
楼主
发表于 2020-4-25 14:55:43
