我想把菜單固定在最上面

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>