Я хочу, чтобы мое меню было закреплено сверху

Мое меню скрыто/показано, но я хочу, чтобы оно было вверху страницы при прокрутке.

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: ЗДЕСЬ

Посетите мою страницу: ЗДЕСЬ


javascript menu scroll navbar fixed
person Giulia Christie    schedule 23.05.2015    source источник
comment
возможный дубликат Оставить строку меню фиксированной вверху при прокрутке   -  person Glenn Ferrie    schedule 24.05.2015

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте следующее в меню 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;
}
person Ravi    schedule 23.05.2015
comment
Фиксированное положение работало, а относительное (стрелка) — нет. Он остается на том же месте, но не в нижней части меню. Вы можете увидеть здесь - person Giulia Christie; 23.05.2015
comment
Похоже, вы изменили только CSS меню, а не CSS стрелки. Я не вижу свойства position:relative, добавленного в css стрелки (fa-angle-double-down). Также удалите margin-top:0;. Отредактировал мой сценарий соответственно. - person Ravi; 23.05.2015
comment
Извините, я изменил CSS-переключатель меню, но исправил, как вы сказали, и ошибка продолжается ... - person Giulia Christie; 23.05.2015
comment
В порядке. Я вижу вашу точку зрения. В этом случае вы должны обернуть оба в контейнер меню и назначить фиксированный класс контейнеру. См. раздел «Редактировать» в ответе. - person Ravi; 24.05.2015
comment
МОЙ БОГ! Ты сделал это! Большое спасибо! Теперь работает так красиво ‹3 - person Giulia Christie; 24.05.2015

arrow_upward
0
arrow_downward

Ты можешь использовать

<div class="menu navbar-fixed-top"></div>
person cabey    schedule 23.05.2015
comment
Но как я могу исправить этот новый класс? - person Giulia Christie; 23.05.2015
comment
Это класс начальной загрузки, который фиксирует этот div вверху. - person cabey; 23.05.2015