Фиксированная панель меню для веб-сайта

Хорошо, я создавал себе веб-сайт с прокруткой параллакса и не могу понять, как сделать фиксированную строку меню.

Я хочу, чтобы строка меню отображалась на 2/3 раздела вниз по веб-сайту, и когда пользователь прокручивает эту страницу, я хочу, чтобы она фиксировалась в верхней части страницы, когда они прокручивают оставшуюся часть страницы. Извините, если моя терминология ужасна, если это поможет, я хочу, чтобы строка меню функционировала точно так же, как на этой веб-странице.

Так что в основном я понятия не имею, как это сделать в css, поэтому, если бы кто-то мог помочь, это было бы здорово.

http://alwayscreative.net/

Спасибо :)


menu scroll css parallax fixed
person michael    schedule 28.05.2013    source источник
comment
Вы уже что-то погуглили? Перед открытием темы? Что вы пробовали сами?   -  person Rafael    schedule 28.05.2013

Ответы (1)


arrow_upward
3
arrow_downward

Может ли ЭТО указать вам правильное направление? Или ДРУГОЙ один

<div class="header"><strong>Header</strong></div>
<div class="nav"><strong>Navigation Bar</strong></div>
<div class="content"></div>
<style>
body{
    margin: 0;
}
.header{
    height: 50px;
    background-color: #000;
    font-size: 16px;
    text-align: center;
    color: #fff;
    padding-top: 3%;
}
.nav{
    height: 30px;
    background-color: #D7D7D7;
    font-size: 16px;
    text-align: center;
    color: #000;
    padding-top: 5px;
    width: 100%;
}
.content{
    height: 1200px;
}
</style>

Js:

<script type="text/javascript">
$(document).ready(function(){
    $(window).scroll(function(){
        var scrollTop = 90;
        if($(window).scrollTop() >= scrollTop){
            $('.nav').css({
                position : 'fixed',
                top : '0'
            });
        }
        if($(window).scrollTop() < scrollTop){
            $('.nav').removeAttr('style');  
        }
    })
})</script>
person Rafael    schedule 28.05.2013