我想把菜单固定在最上面

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： 此处

尝试访问我的页面： 此处

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;
}

Answer 2

您可以使用

<div class="menu navbar-fixed-top"></div>