我有下面的代码段，除了当你滚动到#section-container的底部时，顶部的固定元素会移动。 我怎样才能防止这种情况发生 智能手机上？
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: orange;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#container {
position: -webkit-sticky;
position:sticky;
height: 80%;
width: 100%;
top: 20%;
background-color: purple;
}
#fixed {
position: -webkit-sticky;
position:sticky;
top: 0;
height: 20%;
width: 100%;
background-color: lightblue;
}
#section-container {
height: 100%;
overflow: scroll;
}
.sections {
height: 100%;
}
#section1,
#section3 {
background-color: blue;
}
#section2 {
background-color: red;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>scroll</title>
</head>
<body>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
</body>
</html>我找到了一个叫做bodyScrollLock的js库，可以用。做这么简单的事情似乎开销很大。 有谁有更原生的解决方案吗？
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" >
<title>scroll</title>
<script src="https://www.sustainablewestonma.org/swag/public/js/bodyScrollLock.min.js?test0=xxx"></script>
<style>
html{
margin:0;
padding:0;
height:100%;
width:100%;
background-color:orange;
}
body{
margin:0;
padding:0;
height:100%;
width:100%;
}
#container{
position: -webkit-sticky;
position:sticky;
height:80%;
width:100%;
top:20%;
background-color:purple;
}
#fixed{
position: -webkit-sticky;
position:sticky;
top:0;
height:20%;
width:100%;
background-color:lightblue;
}
#section-container{
height:100%;
overflow:scroll;
}
.sections{
height:100%;
}
#section1,#section3{
background-color:blue;
}
#section2{
background-color:red;
}
</style>
</head>
<body id='myBody'>
<div id='fixed'>
</div>
<div id='container'>
<div id='section-container'>
<div id='section1' class='sections'>
</div>
<div id='section2' class='sections'>
</div>
<div id='section3' class='sections'>
</div>
</div>
</div>
<script>
const scrollElement = document.getElementById('section-container');
bodyScrollLock.disableBodyScroll(scrollElement);
</script>
</body>
</html>