Sticky nav не останется в верхней части браузера на прокрутке

У меня возникли проблемы с центрированием моего липкого nav. После того, как я его сосредоточил, он прекратил прокрутку страницы. Любая помощь была бы очень признательна, я смотрел на это некоторое время, и я не уверен, в чем проблема.Sticky nav не останется в верхней части браузера на прокрутке

.navContainter { 
 
    width: 960px; 
 
} 
 
.nav { 
 
    height: 60px; 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    position: -webkit-sticky; 
 
    list-style-type: none; 
 
    text-align: center; 
 
} 
 
.nav ul { 
 
    margin: 0 auto; 
 
    padding-left: 0px; 
 
    padding-top: 10px; 
 
    display: inline-block; 
 
} 
 
ul { 
 
    display: inline; 
 
    padding: 0; 
 
} 
 
li { 
 
    display: inline; 
 
    padding: 5px; 
 
    font-size: 1.5em; 
 
    float: left; 
 
    margin-right: 50px; 
 
    margin-left: 100px; 
 
    position: relative; 
 
    font-family: "Josefin Slab", serif; 
 
} 
 
a { 
 
    width: 60px; 
 
    color: #fff; 
 
} 
 
.sticky { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    z-index: 100; 
 
    border-top: 0; 
 
}

<head class="navContainer"> 
 
    <nav class="nav"> 
 
    <ul> 
 
     <li><a href="web.html">WEB</a></li> 
 
     <li><a href="photo.html">PHOTOGRAPHY</a></li> 
 
     <li><img src="img/demo/_small/logo.png"></li> 
 
     <li><a href="design.html">DESIGN</a></li> 
 
     <li><a href="video.html">VIDEO</a></li> 
 
    </ul> 
 
    </nav> 
 
</head>

источник

2015-10-07 Jedi mindTricker

Боковое примечание, я сомневаюсь, если вы можете просмотреть что-либо на странице, если вы поместили нормальный код тела в раздел ''. – Stickers

Что такое 'позиция: -webkit-sticky;' ?? Вы имели в виду 'position: fixed;?' – Chris

Я не уверен. Я загрузил его на сервер, и он отлично работает. Но пока я работаю локально, он не прилипает к вершине, когда вы прокручиваете. Вот ссылка на то, как это выглядит на сервере http://students.purchase.edu/CHRISTOPHER.SHARRETT/Sharrett_Site/index.html –

В моем опыте с липким ЧС, я бы обернуть СЧ в контейнере с этими элементами:

position: fixed; 
z-index: 9999;

Содержанием моим будет выглядеть примерно так:

.content_main{ 
margin: 0px 0px 0px 0px; 
background: url(../images/concrete_seamless.png) repeat 0 0; 
padding: 105px 0px 0px 0px; 
z-index:5; 
overflow: hidden; 
display: inline-block; 
position: relative; 
}

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

Я никогда не использую webkit: липкий;

источник

2015-10-07 19:45:05 Fearium

Sticky nav не останется в верхней части браузера на прокрутке

ответ

Смежные вопросы