Cześć! Mam pewien problem. Mianowicie sekcja nav, która jest sticky jakoś dziwnie skacze. To znaczy, kiedy "zeskroluję" niżej to w dziwny sposób przykleja się do górnej części strony, w ten sposób utrudniając czytanie. Ma ktoś jakieś rady?
body
{
margin: 0;
background-color: #2F3336;
color: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
h1.logo
{
font-size: 44px;
font-weight: 700;
color: #ddd;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;
margin-bottom: 40px;
}
.nav
{
width: 100%;
background-color: #673c9b;
text-align: center;
padding: 10px 0;
border-top: 1px solid #451a79;
border-bottom: 1px solid #451a79;
}
ul
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
}
ul a
{
color: #ffffff;
text-decoration: none;
display: block;
}
ul > li
{
float: left;
width: 150px;
height: 40px;
border-right: 3px dashed #451a79;
}
ul > li:first-child
{
border-left: 3px dashed #451a79;
}
ul > li:hover > a
{
color: #321e49;
}
#content
{
width: 1000px;
background-color: #454a4f;
color: #ffffff;
margin-right: auto;
margin-left: auto;
font-size: 20px;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title>Kosmiczne Bobry Wiki</title>
<meta name="description" content="Fanowska wikipedia tworzona przez czytelników książki pt. Kosmiczne Bobry Krzysztofa Piersy. Jeżeli intersuje Cię świat tejże książki to zapraszamy do zapoznania się z serwisem!" />
<meta name="keywords" content="Kosmiczne Bobry, Wiki, Fanowska Wiki, Fanowska Wikipedia, Krzysztof Piersa, Wiki o Kosmicznych Bobrach, Kosmiczne Bobry i zemsta księżycowej szarańczy, Rudy pisarz" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<script src="jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
var NavY = $('.nav').offset().top;
var stickyNav = function(){
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1 class="logo">Kosmiczne Bobry Wiki</h1>
<nav class="nav">
<ul class="menu">
<li><a href="#" >Strona Główna</a></li>
<li><a href="#">Wszystkie Książki</a></li>
<li><a href="#" >Forum</a></li>
<li><a href="#" >Wspomóż Nas</a></li>
<li><a href="#" >Kontakt</a></li>
<li><a href="#" >Informacje</a></li>
</ul>
</nav>
</header>
<article>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam a dolor imperdiet lorem commodo egestas. Sed aliquet accumsan auctor. Proin at dolor purus. Vivamus sodales neque vulputate nibh tempus dignissim. Vestibulum sit amet efficitur lectus. Nullam bibendum rhoncus odio, a ullamcorper mi rutrum et. Phasellus posuere, velit ut posuere hendrerit, quam ligula venenatis enim, quis pharetra nisi massa eu justo. Morbi tincidunt lorem et nibh laoreet malesuada. Etiam commodo imperdiet mauris non ullamcorper. Nunc quis mollis nulla, at facilisis ante. Quisque at mauris quis erat imperdiet pellentesque sed sit amet mi. Nam lectus tellus, feugiat viverra est quis, consectetur sagittis sem. Donec dapibus tellus quis nisl fringilla, at tristique erat sagittis. In condimentum ante id mattis vestibulum. Vestibulum ante libero, luctus ac tortor non, ultrices lobortis nisl. Sed porttitor quam urna, in ullamcorper justo ornare eu.</p>
<p>Integer porta lobortis felis non interdum. Etiam viverra egestas justo eget pulvinar. Etiam et varius purus. Nulla sit amet justo at enim maximus dapibus at eu enim. Cras at enim congue, posuere tortor in, viverra dui. Nam sed felis a lorem feugiat luctus ut nec eros. Vivamus elementum sapien finibus urna vehicula fringilla. In tellus nisi, mollis ac dapibus quis, placerat nec nisl.</p>
<p>In blandit, purus id auctor iaculis, lectus metus euismod nulla, ac faucibus sapien metus a dui. Mauris ornare, nunc sed finibus tincidunt, quam sapien efficitur lectus, et consequat ipsum mauris in dolor. Aenean lacus justo, malesuada nec tempor a, tincidunt ac elit. Maecenas iaculis ullamcorper tellus, sed aliquet erat scelerisque eget. Fusce ut nibh consequat, pretium leo quis, porttitor tortor. Quisque vestibulum sapien et lorem accumsan, eget condimentum felis pretium. Etiam erat dolor, finibus ornare ante sit amet, lobortis ullamcorper turpis. Vestibulum eget risus odio. </p>
<p>In blandit, purus id auctor iaculis, lectus metus euismod nulla, ac faucibus sapien metus a dui. Mauris ornare, nunc sed finibus tincidunt, quam sapien efficitur lectus, et consequat ipsum mauris in dolor. Aenean lacus justo, malesuada nec tempor a, tincidunt ac elit. Maecenas iaculis ullamcorper tellus, sed aliquet erat scelerisque eget. Fusce ut nibh consequat, pretium leo quis, porttitor tortor. Quisque vestibulum sapien et lorem accumsan, eget condimentum felis pretium. Etiam erat dolor, finibus ornare ante sit amet, lobortis ullamcorper turpis. Vestibulum eget risus odio.</p>
</article>
</body>
</html>
