[已解决]关于滚动滑轮和position:fixed 的问题

Ootme · 发表于 2020-4-23 22:45:49

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

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 就可以固定，这是什么原因啊。。。
求助各位大佬。。

最佳答案

月排行榜 / 总排行榜

不二如是

2020-4-25 14:55:43

要想知道答案，鱼油需要知道：文档流和 BFC

文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指 BFC 中的 FC 。

FC 是 formatting context 的首字母缩写，就是是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

常见的 FC 有 BFC、IFC，还有 GFC 和 FFC。

BFC 是 block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域

跳转到最佳答案楼层

Ootme · 发表于 2020-4-24 13:12:30

求助

不二如是 · 发表于 2020-4-25 14:55:43

要想知道答案，鱼油需要知道：文档流和 BFC

文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指 BFC 中的 FC 。

FC 是 formatting context 的首字母缩写，就是是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

常见的 FC 有 BFC、IFC，还有 GFC 和 FFC。

BFC 是 block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域

Ootme · 发表于 2020-4-27 14:11:24

不二如是发表于 2020-4-25 14:55
要想知道答案，鱼油需要知道：文档流和 BFC

文档流其实分为定位流、浮动流和普通流三种。而普通流其实就 ...

谢谢老哥

账号		自动登录	找回密码
密码			立即注册