<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title</title>
<meta charset="UTF-8">
<style>
.menu{
position: absolute;
left: 200px;
top: 48px;
bottom: 0;
width: 220px;
border: 1px solid red;
}
.fa{
position: fixed;
top: 0;
}
</style>
</head>
<body style="margin: 0" onscroll="Gun()">
<div style="height: 48px;background-color: #303030"></div>
<div id="menu" class="menu"></div>
<div id="content" style="position: absolute;left: 420px;top: 48px;bottom: 0;right: 200px;border: 1px solid red">
<p>pp</p>
<p>pp</p>
<div style="height: 150px;overflow: auto">
<p>kk</p>
<p>kk</p>
<p>kk</p>
<p>kk</p>
<p>kk</p>
<p>kk</p>
<p>kk</p>
</div>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
<p>pp</p>
</div>
<script src="jquery-3.5.1.js"></script>
<script>
function Gun() {
console.log(1);
var scr=$('html,body').scrollTop(); // $('body').scrollTop();不管用时，用$('html,body').scrollTop();
console.log(scr);
if (scr>48) {
$("#menu").addClass("fa");
} else {
$("#menu").removeClass("fa");
}
}
</script>
</body>
</html>