【发布时间】：2021-09-09 21:23:04
【问题描述】：
我有一个移动导航菜单，我使用 CSS 的 top 属性将它定位在我的页面横幅下方，当我向下滚动菜单时，它保持在相同的位置（距离顶部 51vh），我希望菜单坚持向下滚动并且横幅消失后的页面顶部。这是我的代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Align</title>
<link rel="shortcut icon" type="image/jpg" href="images/favicon.ico"/>
<link rel="stylesheet" href="css/fontawesome.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/mobile-menu.css">
</head>
<body>
<div id="banner">
<canvas id='c' width="100%" height="35%"></canvas>
<img src="images/Main Banner.png" class="img-fluid" id="cover" alt="...">
<img src="images/logo.png" id="logo" alt="...">
<div id="pc-nav" style="position: relative; z-index: 1;">
<nav class="navbar navbar-expand-lg navbar-light bg-light navbar-border nav-shadow" id="main-nav">
<!-- <a class="navbar-brand nb" href="index.html">HOME</a> -->
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse text-right flex-grow-1 mr-right1" id="navbarNavAltMarkup">
<div class="navbar-nav ms-auto me-5 flex-nowrap align-items-end">
<a class="nav-link" href="therapists.php">Find Therapists</a>
<a class="nav-link" href="blogs.html">Community Content</a>
<a class="nav-link me-5" href="interns.php">Join us</a>
</div>
</div>
</nav>
</div>
<div class="outer-menu sticky-top" style="z-index: 11;">
<input class="checkbox-toggle" type="checkbox" />
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li><a href="therapists.php">Find Therapists</a></li>
<li><a href="blogs.html">Community Content</a></li>
<li><a href="interns.php">Join us</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid px-5 pt-1 " id="content" style="position: relative; z-index: 9;">
<div class="row gx-1">
<div class="col" >
<div>
<div class="p-5 mb-4 aasha-red-bg rounded-3">
<div class="container-fluid py-5 animatedParent animateOnce" data-sequence='250' data-appear-top-offset='-337'>
<h1 class="display-5 fw-bold animated fadeInLeftShort" data-id='1'>About Align</h1>
<p class="fs-4 text-white animated fadeInLeftShort" data-id='2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. Pellentesque bibendum leo quis leo rutrum faucibus. Aenean facilisis pharetra lorem, non porta ipsum imperdiet in. Etiam vel suscipit felis, eget ultricies augue. Aenean libero justo, malesuada ac libero sed, tincidunt cursus orci. Suspendisse iaculis commodo eleifend. Aliquam.</p>
<a href="more-about-us.html" class="btn inverse-main-btn btn-lg animated fadeInLeftShort" data-id='3'>More about us</a>
</div>
</div>
</div>
<br>
<div>
<div class="p-5 mb-4 rounded-3">
<div class="container-fluid py-5 animatedParent animateOnce" data-appear-top-offset='-337' data-sequence='250'>
<h1 class="display-5 fw-bold aasha-red-text animated fadeInLeftShort" data-id='1'>Support Group</h1>
<p class="col-md-8 fs-4 animated fadeInLeftShort" data-id='2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. Pellentesque bibendum leo quis leo rutrum faucibus.</p>
<a href="support-group.html" class="btn main-btn btn-lg animated fadeInLeftShort" data-id='3'>Find out more</a>
</div>
</div>
</div>
<hr>
<div>
<div class="p-5 mb-4 rounded-3">
<div class="container-fluid py-5 animatedParent animateOnce" data-appear-top-offset='-337' data-sequence='250'>
<h1 class="display-5 fw-bold animated fadeInLeftShort" data-id='1'>Psych, Resources and Other Stuff</h1>
<p class="col-md-8 fs-4 animated fadeInLeftShort" data-id='2'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. Pellentesque bibendum leo quis leo rutrum faucibus. Aenean facilisis pharetra lorem, non porta ipsum imperdiet in. Etiam vel suscipit felis, eget ultricies augue. Aenean libero justo, malesuada ac libero sed, tincidunt cursus orci. Suspendisse iaculis commodo eleifend. Aliquam.</p>
</div>
</div>
</div>
</div>
<div class="col-1">
</div>
<div class="col" id="feed">
<div class="feedposts" >
<img src="images/blog1.jpg" class="img-thumbnail feed-image" id="" alt="..." >
<div class="animatedParent animateOnce" data-appear-top-offset='-137' data-sequence='250'>
<p class="fs-6 blog-author animated fadeInRightShort" data-id='1'> Memento | June 6th, 2021 | 2 min read </p>
<h3 class="animated fadeInRightShort" data-id='2'>Lorem ipsum dolor sit amet</h3>
<p class="fs-5 blog-text animated fadeInRightShort" data-id='3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. </p>
<a href="#" class="btn main-btn btn-lg animated fadeInRightShort" data-id='4'>Read More</a>
</div>
</div>
<div class="feedposts" >
<img src="images/blog2.jpg" class="img-thumbnail feed-image" id="" alt="..." >
<div class="animatedParent animateOnce" data-appear-top-offset='-137' data-sequence='250'>
<p class="fs-6 blog-author animated fadeInRightShort" data-id='1'> Memento | June 6th, 2021 | 2 min read </p>
<h3 class="animated fadeInRightShort" data-id='2'>Lorem ipsum dolor sit amet</h3>
<p class="fs-5 blog-text animated fadeInRightShort" data-id='3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. </p>
<a href="#" class="btn main-btn btn-lg animated fadeInRightShort" data-id='4'>Read More</a>
</div>
</div>
<div class="feedposts" >
<img src="images/blog3.jpg" class="img-thumbnail feed-image" id="" alt="..." >
<div class="animatedParent animateOnce" data-appear-top-offset='-137' data-sequence='250'>
<p class="fs-6 blog-author animated fadeInRightShort" data-id='1'> Memento | June 6th, 2021 | 2 min read </p>
<h3 class="animated fadeInRightShort" data-id='2'>Lorem ipsum dolor sit amet</h3>
<p class="fs-5 blog-text animated fadeInRightShort" data-id='3'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur at leo lobortis, luctus dui a, gravida orci. </p>
<a href="#" class="btn main-btn btn-lg animated fadeInRightShort" data-id='4'>Read More</a>
</div>
</div>
</div>
</div>
</div>
<div id="footer" style="position: relative; z-index: 9;">
<img src="images/footer.png" class="img-fluid" id="footerbanner" alt="...">
</div>
<div class="footer-basic" style="position: relative; z-index: 9;">
<footer>
<div class="footer-links">
<div><a href="for-professionals.php">For Therapists</a></div>
<div><a href="interns.html">For Volunteers</a></div>
<div><a href="content_creators.html">For Content Creators</a></div>
</div>
<div class="socials">
<div class="socials-text">Socials</div>
<div class="socials-icons">
<a href="https://www.instagram.com/tryalign/" class="social-icons" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://www.linkedin.com/company/the-aasha-initiative/" class="social-icons" class="social-lin" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<div class="copyright">ALIGN © 2021</div>
</footer>
</div>
<script src="js/dat.gui.js"></script>
<script src="js/brush.js"></script>
<script type="text/javascript" src="js/css3-animate-it.js"></script>
</body>
</html>
CSS：
@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300');
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu * {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.outer-menu a, .outer-menu a a:visited, .outer-menu a a:hover, .outer-menu a:active {
color: inherit;
text-decoration: none;
}
.outer-menu h1 {
font-family: 'Pacifico', cursive;
font-weight: 400;
font-size: 3em;
text-align: center;
}
.outer-menu {
position: fixed;
top: 51vh;
right: 0;
z-index: 1;
}
.outer-menu .checkbox-toggle {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 52px;
height: 52px;
opacity: 0;
}
.outer-menu .checkbox-toggle:checked + .hamburger > div {
transform: rotate(135deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
.outer-menu .checkbox-toggle:checked + .hamburger > div:after {
opacity: 0;
}
.outer-menu .checkbox-toggle:checked ~ .menu {
pointer-events: auto;
visibility: visible;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div {
transform: scale(1);
transition-duration: .75s;
}
.outer-menu .checkbox-toggle:checked ~ .menu > div > div {
opacity: 1;
transition: opacity .4s ease .4s;
}
.outer-menu .checkbox-toggle:hover + .hamburger {
box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}
.outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
.outer-menu .hamburger {
position: sticky;
position: -webkit-sticky;
top: 0;
right: 0;
z-index: 1;
width: 48px;
height: 48px;
padding: .5em 1em;
background: rgba(100, 102, 231, 0.75);
border-radius: 0 .12em .12em 0;
cursor: pointer;
transition: box-shadow .4s ease;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #FEFEFE;
transition: all .4s ease;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
left: 0;
width: 100%;
height: 2px;
background: inherit;
transition: all .4s ease;
}
.outer-menu .hamburger > div:after {
top: 10px;
}
.outer-menu .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
visibility: hidden;
overflow: hidden;
backface-visibility: hidden;
outline: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.541);
}
.outer-menu .menu > div {
width: 200vw;
height: 200vw;
color: #FEFEFE;
background: rgba(242, 31, 66, 0.754);
border-radius: 50%;
transition: all .4s ease;
flex: none;
transform: scale(0);
backface-visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity .4s ease;
overflow-y: auto;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
.outer-menu .menu > div > div > ul {
list-style: none;
padding: 0 1em;
margin: 0;
display: block;
max-height: 100vh;
}
.outer-menu .menu > div > div > ul > li {
padding: 0;
margin: 1em;
font-size: 24px;
display: block;
}
.outer-menu .menu > div > div > ul > li > a {
position: relative;
display: inline;
cursor: pointer;
transition: color .4s ease;
}
.outer-menu .menu > div > div > ul > li > a:hover {
color: #e5e5e5;
}
.outer-menu .menu > div > div > ul > li > a:hover:after {
width: 100%;
}
.outer-menu .menu > div > div > ul > li > a:after {
content: '';
position: absolute;
z-index: 1;
bottom: -0.15em;
left: 0;
width: 0;
height: 2px;
background: #e5e5e5;
transition: width .4s ease;
}
另外，我有一个不同的大屏幕导航栏，它在移动设备和平板设备上隐藏，而我的移动菜单/导航栏在大屏幕上隐藏，反之亦然。
【问题讨论】：