Верхнее меню загрузки

Я пытаюсь сделать меню начальной загрузки с изображением и под ссылками меню, что при прокрутке меню палочки в верхней части окна.

Я нашел интересный загрузочный аффикс и использовал то, что в этой теме: bootstrap-affix: Div под аффиксами "прыжки" к началу. Как сделать его плавным прокручивание?

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

Я написал скрипку для вас, чтобы увидеть мою проблему и попробовать решение: http://jsfiddle.net/mram888/WnPqF/

Я попытался поместить другой z-индекс для класса своих разделов меню, но работает только правильно, когда страница прокручивается, а меню прикреплено вверху.

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%;
    z-index:2;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

.nav-wrapper {
    z-index: 2;
}

Ответы

Ответ 1

Вам нужно применить z-index к #nav не к .nav-wrapper:

#nav { 
  position: relative;
  z-index: 2; 
}

Демо: http://jsfiddle.net/t7pL3/

Ответ 2

Еще одна вариация для вас: http://jsfiddle.net/panchroma/6P5sF/

Поведение здесь немного отличается от предыдущего. Навигатор прокручивает страницу до ее прикрепления, и когда всплывающее меню открывается, оно отбрасывает содержимое страницы.

Я удалил ваш javascript и вызвал все, используя атрибуты данных, добавив следующее к вашему div-оболочки:

<div id="nav-wrapper" data-spy="affix" data-offset-top="100">

data-offset-top - это расстояние, которое вам нужно прокрутить, прежде чем будет прикреплено меню.

Я также сделал небольшое изменение в CSS:

#nav-wrapper.affix {
  top: 0;
  width: 100%
}

Надеюсь, это поможет!

Ответ 3

Кажется, это может быть достигнуто путем замены CSS, предоставленного вами

#nav {
    width: 100%;
    position:fixed;
}

#nav.affix {
    top: 0;
}

#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

Основное отличие состоит в том, что здесь #nav охватывает как случаи #nav.affix, так и #nav.affix-top

Смотрите этот jsfiddle.

изменить: Проблема возникает, когда позиция #nav наследуется. Если вы исправите это, как я предположил, или если вы установите его относительно, как было предложено другим сообщением, ваша проблема будет решена.