javascript - 我想将菜单固定在顶部

Question

我的菜单已隐藏/显示，但我想在滚动时将其保留在页面顶部。

HTML:

<div class="menu">
    <ul>
        <a href="#home"><li>Home</li></a>
        <a href="#about"><li>About</li></a>
        <a href="#servicces"><li>Services</li></a>
        <a href="#projects"><li>Work</li></a>
        <a href="#contact"><li>Contact</li></a>
    </ul>
</div>
<div class="menu-toggle">
    <a href="#"><i class="fa fa-angle-double-down"></i></a>
</div>

CSS:

.menu {
  display:none;
    width:100%;
  background:#fcfcfc;
}
.menu ul {
    font-family: 'Raleway', serif;
  font-weight:300;
  height:110%;
    list-style:none;
    margin:0;
    padding:10px;
    text-align:center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
.menu ul li {
    color:#333;
    font-size:12px;
    letter-spacing:2px;
    padding:15px 0;
  padding-left:5px;
  padding-right:5px;
    text-transform:uppercase;
  transition:all .3s ease-in-out;
}
.menu ul li:hover {
  text-align:center;
    background:rgba(90,221,184,.6);
  color:#fff;
  font-weight:bold;
  transition:all .3s ease-in-out;
}
.menu a {
  text-decoration:none;
    color: #333;
}
.menu-toggle {
    background:none;
  color: #333;
    width:100%;
    text-align:center;
    padding:10px 0;
    font-size:25px;
}
.menu-toggle a {
    text-decoration:none;
    color: #333;
}
.fa-angle-double-down{
  color:#fcfcfc;
  transition:all .3s ease-in-out;
}
.fa-angle-double-down:hover{
  color:#5ADDB8;
  transition:all .2s ease-in-out;
  -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

还有 JS:

$(document).ready(function(){
    $(".menu-toggle a").click(function(){ 
        $(".menu").slideToggle(700);
    });
});

我想让箭头位于顶部，当单击它时，它会向下移动并将菜单放在顶部，关闭菜单后，箭头返回到其初始位置。

访问菜单codepen:HERE

访问我的页面尝试:HERE

Answer 1

在菜单 CSS 中添加以下内容:

    position:fixed;
    top:0;

并在箭头 css 中添加以下内容:

    position:relative;

这应该符合您的想法。

编辑:

.menu-container{
  position: fixed;
  top:0;
}
.menu{
   display: block;
   position: relative;
}
.menu-toggle{
   margin:0 auto;
   position:relative;
}