Что не так с этим кодом, чтобы прикрепить верхнюю панель навигации?

Как я прикрепляю элемент? Я искал несколько недель и нашел много учебников и примеров, которые либо имеют некоторый скрипт java, либо говорят, что нужно установить шпион данных для привязки и установить смещение данных в верхнее число пикселей для прокрутки перед фиксацией элемента. Я пробовал все это, и ничто из этого не работает, верхняя панель навигации не фиксируется. Я забываю какой-то CSS или что-то в этом роде?Что не так с этим кодом, чтобы прикрепить верхнюю панель навигации?

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

<style> 
#topDiv { 
    width:100%; 
    height:75px; 
    padding:15px; 
    position:relative; 
    background-color:grey; 
    margin-0; 
} 

.topNavContainer { 
    height:71px; 
    background-color:#8AC007; 
    position:absolute; 
    width:100%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:0 !important; 
    z-index:999; 
} 

.topNavLinks { 
    text-align:center; 
    line-height:71px; 
    width:auto; 
    margin:auto; 
} 

.topNavLinks a { 
    display:inline-block; 
    padding-left:15px; 
    padding-right:15px; 
} 

.topNavLinks a:hover { 
    color:#8AC007; 
    background-color:#ffffff; 
    text-decoration:none; 
} 

#Main { 
    padding:0; 
    position:relative; 
    width:85%; 
    height:1900px; 
    background-color:black; 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:71px; 
} 


</style> 
</head> 

<body> 
<div id="topDiv"> 
<h2>This is the Top Section</h2> 
</div> 

<div data-spy="affix" data-offset-top="75" class="topNavContainer"> 
<div class="topNavLinks"> 
<a href="#">Home</a> 
<a href="#">Section 3</a> 
<a href="#">Section 2</a> 
</div> 
</div> 

<div id="Main"> 
<h1 style="color:white;"> 
This is the Body 
</h1> 
</div> 


</body> 
</html>

источник

2015-07-16 Arnie BB9

изменить порядок использование сценария JQuery перед тем загрузчиком. – Jai

Affix добавит position:fixed к вашему элементу. Поэтому удалите position:absolute от .topNavcontainer и добавьте класс аффикса в ваш CSS с помощью top:0.

Аффикс affix.js

Позиционирование с помощью CSS

Аффикс плагина переключает между тремя классами, каждый из которых представляет определенное состояние: .affix, .affix-топ, и .affix -дно. Вы должны указать стили: исключение из положения: исправлено; на .affix, для этих классов самостоятельно (независимо от этого плагина) для обработки фактических позиций.

Here ссылка на плагин documentaion Affix.js.

#topDiv { 
 
    width:100%; 
 
    height:75px; 
 
    padding:15px; 
 
    position:relative; 
 
    background-color:grey; 
 
    margin:0; 
 
} 
 

 
.topNavContainer { 
 
    height:71px; 
 
    background-color:#8AC007; 
 
    width:100%; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    margin-top:0 !important; 
 
    z-index:999; 
 
} 
 

 
.affix { 
 
top:0; 
 
} 
 

 
.topNavLinks { 
 
    text-align:center; 
 
    line-height:71px; 
 
    width:auto; 
 
    margin:auto; 
 
} 
 

 
.topNavLinks a { 
 
    display:inline-block; 
 
    padding-left:15px; 
 
    padding-right:15px; 
 
} 
 

 
.topNavLinks a:hover { 
 
    color:#8AC007; 
 
    background-color:#ffffff; 
 
    text-decoration:none; 
 
} 
 

 
#Main { 
 
    padding:0; 
 
    position:relative; 
 
    width:85%; 
 
    height:1900px; 
 
    background-color:black; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    margin-top:71px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<div id="topDiv"> 
 
    <h2>This is the Top Section</h2> 
 
</div> 
 

 
<div data-spy="affix" data-offset-top="75" class="topNavContainer"> 
 
    <div class="topNavLinks"> 
 
    <a href="#">Home</a> 
 
    <a href="#">Section 3</a> 
 
    <a href="#">Section 2</a> 
 
    </div> 
 
</div> 
 

 
<div id="Main"> 
 
    <h1 style="color:white;"> 
 
    This is the Body 
 
    </h1> 
 
</div>

источник

2015-07-16 09:03:21 DavidDomain

Спасибо за ответ, код работает правильно на этом веб-сайте, когда я нажимаю «Выполнить фрагмент кода», но когда я помещаю код на Dreamweaver на свой компьютер, то.topNavContainer по-прежнему не фиксируется при прокрутке? –

Вы уверены, что добавили все соответствующие файлы * bootstrap (bootstrap.css, bootstrap.js) * в ваш рабочий проект? – DavidDomain

Да, код, который я разместил в вопросе, - это точный код в Dreamweaver на моем компьютере, я скопировал его и вложил в него. –

Что не так с этим кодом, чтобы прикрепить верхнюю панель навигации?

ответ

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