Как следует из названия, у меня есть все основания создать веб-страницу с большим логотипом над панелью навигации. Эта панель навигации будет перемещаться вверх по мере прокрутки страницы до тех пор, пока она не встанет на место в верхней части экрана. Затем я хотел бы, чтобы меньший логотип появлялся под панелью навигации и оставался запертым на месте. Я искал четыре дня для решения на этой веб-странице и в других местах, которые не имеют преимущественной силы. Чаще всего это решение включает загрузку jquery-библиотек или загрузочных библиотек. Я не хотел бы использовать это, если это возможно. Причина этого заключается в том, что я создаю эту веб-страницу в качестве учебного опыта, а код, хранящийся в других местах, не содержит частей, которые будут путать меня в это время. Поэтому в основном я хочу знать, как это работает, и не получить простой метод копирования-вставки, который имеет библиотеку, выполняющую всю работу.Создание липкой панели навигации под логотипом без использования внешних библиотек
Вот что я thusfar, и это было полностью основано на этом примере: http://codepen.io/Guilh/pen/JLKbn
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The Den</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<header>
<table bordercolor="FD0000" align="center" cellspacing="0" cellpadding="0" style="border-color: FD0000; border-width:2px; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;">
<tr><td><center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a>
</center></td></tr></table>
</header>
<nav class="main-nav">
<ul id="main-nav">
<li><a href="#">Nav Link 1</a></li>
<li><a href="#">Nav Link 2</a></li>
<li><a href="#">Nav Link 3</a></li>
<li><a href="#">Nav Link 4</a></li>
</ul>
</nav>
<div class="main">
<h2>Random words to fill in the gap.</h2>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
<p>Random words to fill in the gap.</p>
</div>
</body>
CSS:
* {
box-sizing: border-box;
}
li {
float: left;
}
body {
margin: 0;
padding-top: 250px;
}
header {
height: 300px;
padding-top: 50px;
background: #f07057;
}
.main-nav,
.main {
position: relative;
}
.main-nav {
background: #fff;
height: 80px;
z-index: 150;
margin-bottom: -80px;
box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
header,
.main-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
}
.main {
background: #f2f2e8;
padding: 110px 50px 50px;
column-count: 2;
column-gap: 40px;
width: 100%;
}
JS:
var mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();
$(window).scroll(function() {
if($(this).scrollTop() > hdr) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
Проблема с приведенным выше примером заключается в том, что она работает только на странице codepen. В тот момент, когда я снимаю его с сайта и сохраняю его на документе блокнота ++ и открываю его, внезапно панель навигации прокручивается мимо намеченной точки и полностью закрывается. Это та же проблема, с которой я столкнулся с каждым другим учебником, с которым я столкнулся. Либо навигационная панель не может оставаться на экране, либо логотип станет фоном, который прокручивает текст, оставляя навигационную панель примерно на 3/4 до логотипа.
Это поможет, если вы указали style.css и script.js. Также почему именно вы хотите избежать использования библиотек? Они действительно могут сделать такие вещи довольно тривиальными ... – Shadow
Честно говоря, это потому, что я очень новичок в этом, и я хотел бы посмотреть, как он функционирует, чтобы понять его лучше.Если какой-то код размещен в другом месте, это похоже на недостающую часть головоломки или две, и это просто отбрасывает меня. – Shadowfang