我创建了一个下拉菜单，它下拉到顶部并给它一个切换按钮。按钮工作正常，菜单随着关闭和打开而移动，但是当菜单打开并向下滚动页面时，切换按钮不会随之移动，我不知道如何解决此问题。下面我将为我的HTML和CSS jode提供用于切换的jquery。
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Site</title>
<link rel="stylesheet" type="text/css" href="../CSS/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../jQuery/jquery.cycle2.min.js"></script>
<script src="../jQuery/jquery.cycle2.video.js"></script>
<script src="../jQuery/jquery.cycle2.carousel.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!--Skeleton for Slide out Menu-->
<body class="menu menu-open">
<header>
<nav class="menu-side">
<!--Content for Menu Side-->
<a href="#">Photography</a>
<a href="#">Film</a>
<a href="#" id="logo"><img src="../../Assets/Josh-Logo.png" alt="Josh Meyers"></a>
<a href="#">About Me</a>
<a href="#">Contact Me</a>
<!--End of Content for Menu Side-->
</nav>
</header>
<!--End of Skeleton for Slide out Menu-->
<!--Button to Toggle "Menu Side"-->
<a href="#" class="menu-toggle"><img src="../../Assets/top-menu-icon.png" width="900px" height="50px" alt=""/></a>
<!--End of Button to Toggle "Menu Side"-->
<!--Josh Meyers about and Title-->
<div id="Josh-Meyers">
<h1>Josh Meyers</h1>
<p>Photography is the science, art and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film.[1]
Typically, a lens is used to focus the light reflected or emitted from objects into a real image on the light-sensitive surface inside a camera during a timed exposure. With an electronic image sensor, this produces an electrical charge at each pixel, which is electronically processed and stored in a digital image file for subsequent display or processing. The result with photographic emulsion is an invisible latent image, which is later chemically "developed" into a visible image, either negative or positive depending on the purpose of the photographic material and the method of processing. A negative image on film is traditionally used to photographically create a positive image on a paper base, known as a print, either by using an enlarger or by contact printing.
</p>
</div>
<!--Responsive Video Slider and Title-->
<div id="Recent-Projects">
<h1>Recent Projects</h1>
</div>
<div id="video-wrapper">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<div class="cycle-slideshow"
data-cycle-carousel-visible="3"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-auto-height="640:360"
data-cycle-prev=".cycle-prev"
data-cycle-next=".cycle-next"
data-cycle-slides=">iframe"
data-cycle-youtube="true"
data-cycle-youtube-autostart="true"
data-cycle-pager=".cycle-pager"
data-cycle-carousel-fluid="true"
>
<iframe width="560" height="315" src="https://www.youtube.com/embed/7TccWhZ6T8c?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/VPuKbzP2KNM?rel=0" frameborder="0" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/DHW0hQHLpTc?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cycle-pager"></div>
</div>
<!--End Responsive Video Slider and Title-->
<script>
(function() {
var body = $('body');
$('.menu-toggle').bind('click', function() {
body.toggleClass('menu-open', 'toggle-open');
return false;
});
})();
</script>
</body>
</html>
CSS
body {
background-color:black;
overflow:scroll;
}
/*Design for Slide Down menu*/
.menu {
position:relative;
top:0px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
overflow:scroll;
}
.menu-open {
top:171px;
}
.menu-open .menu-side {
top:0px;
}
.menu-side {
background-color:#333;
border-radius:0px 0px 20px 20px;
border-bottom:1px solid #000;
color:#fff;
position:fixed;
left:15%;
top:-171px;
width:900px;
max-width:900px;
height: 150px;
padding: 10px;
-webkit-transition: top 0.8s ease;
-moz-transition: top 0.8s ease;
transition: top 0.8s ease;
text-align:center;
}
.menu-toggle {
position:relative;
display:block;
width:900px;
height:50px;
margin-left:auto;
margin-right:auto;
top:-23.5px;
}
/*Content style for Menu Side*/
.menu-side a{
position:relative;
margin-top:20px;
display:inline-block;
padding:20px;
text-align:center;
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
font-size:18px;
font-style:italic;
color:white;
text-decoration:none;
}
#logo {
border:thin solid white;
-moz-box-shadow:30px 30px 30px 30px black;
-webkit-box-shadow:20px 20px 20px 20px 20px black;
box-shadow:5px 5px 20px 3px black;
}
/*Style for Josh Meyers About*/
#Josh-Meyers h1 {
text-align:center;
color:#FFF;
}
#Josh-Meyers p {
color:#FFF;
}
/*Style for Video Slide Show and Title*/
#Recent-Projects {
text-align:center;
height:40px;
width:100%;
max-width:100%;
}
#Recent-Projects h1 {
text-align:center;
color:#FFF;
}
iframe {max-width:100%}
#video-wrapper {
width:100%;
max-width:100%;
height:400px;
margin-top:5px;
}
.cycle-slideshow {
width:100%;
top:2%;
margin-left:auto;
max-width:90%;
margin-right:auto;
}
.cycle-prev, .cycle-next {
font-size:40px;
font-weight:bold;
color:#FFF;
display:block;
position:absolute;
top:60%;
z-index:999;
cursor:pointer;
}
.cycle-prev {left:2%;}
.cycle-next {right:2%;}
.cycle-pager {
text-align: center; width: 100%; z-index: 999; position: absolute; overflow: hidden; top:85%
}
.cycle-pager span {
font-family: arial; font-size: 50px; width: 16px; height: 16px;
display: inline-block; color: #ddd; cursor: pointer;
}
.cycle-pager span.cycle-pager-active { color: #D69746;}
.cycle-pager > * { cursor: pointer;}
iframe {
padding-left:5px;
padding-right:5px;
}