<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>Belka STICKY</title>
<meta name="description" content="Ćwiczenia tworzenia sticky belki oraz rozwijanego menu"/>
<meta name="keywords" content="sticky, jQuery, ćwiczenia"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div class="logo"><span style="color:red;">S</span>ticky<span style="color:green">B</span>elka</div>
<div class="seperator" style="height:40px;"></div>
<div class="nav">
<ol>
<li><a href="#">Nowości</a>
<ul>
<li><a href="#">Pixer</a></li>
<li><a href="#">Listing</a></li>
<li><a href="#">Dotter</a></li>
</ul>
</li>
<li><a href="#">Belki Demo</a>
<ul>
<li><a href="#">Color List</a></li>
<li><a href="#">Hidden List</a></li>
<li><a href="#">Flexi List</a></li>
</ul>
</li>
<li><a href="#">Rolki</a>
<ul>
<li><a href="#">Roller Blade</a></li>
<li><a href="#">Roller City</a></li>
<li><a href="#">Roller Scroller</a></li>
</ul>
</li>
</ol>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris diam nunc, feugiat eget quam nec, finibus pretium erat. In mollis urna at velit bibendum tristique. Praesent nec turpis sit amet eros imperdiet pretium in sit amet ipsum. Phasellus pulvinar blandit ultricies. Nam id nisl ut lacus congue laoreet. Suspendisse gravida in nibh a euismod. Sed sed mi gravida, congue mauris et, lobortis dui. Mauris sapien enim, tempor egestas consectetur nec, malesuada eu nibh. Mauris malesuada convallis sapien, non rutrum nulla vestibulum sed.</p>
<p>Fusce commodo sapien magna, vel iaculis lectus accumsan quis. Donec id arcu vitae mauris blandit volutpat. Sed quis cursus magna, eget laoreet eros. Curabitur venenatis enim a urna pretium dapibus. Sed euismod dui vel sodales tempor. Nulla augue diam, sodales vitae dapibus eu, semper eu erat. Proin sed ante nibh. In hac habitasse platea dictumst. Quisque ac turpis accumsan, tincidunt magna ut, ullamcorper turpis. Etiam rutrum fermentum nibh, pellentesque ornare libero malesuada ac. Donec at urna vel risus suscipit blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Duis feugiat eros urna, ac pulvinar dui venenatis vitae. Sed aliquam sapien sem, ut maximus ante fermentum a. Mauris eget varius arcu, vitae pharetra risus. Mauris eu faucibus felis, eget pharetra libero. Aenean lacus lorem, pharetra et ligula at, pharetra egestas ex. Mauris sed ligula enim. Donec suscipit, ligula vel porttitor condimentum, metus odio aliquet lorem, a eleifend mauris lacus a diam. Aenean vehicula tincidunt augue. Sed vestibulum facilisis pulvinar. Nullam sagittis leo sed ipsum accumsan, in pulvinar odio malesuada. Curabitur neque ligula, interdum quis rhoncus non, facilisis condimentum sapien. Donec vel elit a orci dignissim scelerisque. Duis semper, nunc ut imperdiet bibendum, turpis nibh accumsan mi, non accumsan justo diam et enim. Proin finibus ligula nec elit maximus, sit amet viverra leo sagittis. Donec fringilla ultrices nunc, at condimentum est imperdiet vitae. Praesent gravida lacus nec euismod tempor.</p>
<p>Fusce commodo sapien magna, vel iaculis lectus accumsan quis. Donec id arcu vitae mauris blandit volutpat. Sed quis cursus magna, eget laoreet eros. Curabitur venenatis enim a urna pretium dapibus. Sed euismod dui vel sodales tempor. Nulla augue diam, sodales vitae dapibus eu, semper eu erat. Proin sed ante nibh. In hac habitasse platea dictumst. Quisque ac turpis accumsan, tincidunt magna ut, ullamcorper turpis. Etiam rutrum fermentum nibh, pellentesque ornare libero malesuada ac. Donec at urna vel risus suscipit blandit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Duis feugiat eros urna, ac pulvinar dui venenatis vitae. Sed aliquam sapien sem, ut maximus ante fermentum a. Mauris eget varius arcu, vitae pharetra risus. Mauris eu faucibus felis, eget pharetra libero. Aenean lacus lorem, pharetra et ligula at, pharetra egestas ex. Mauris sed ligula enim. Donec suscipit, ligula vel porttitor condimentum, metus odio aliquet lorem, a eleifend mauris lacus a diam. Aenean vehicula tincidunt augue. Sed vestibulum facilisis pulvinar. Nullam sagittis leo sed ipsum accumsan, in pulvinar odio malesuada. Curabitur neque ligula, interdum quis rhoncus non, facilisis condimentum sapien. Donec vel elit a orci dignissim scelerisque. Duis semper, nunc ut imperdiet bibendum, turpis nibh accumsan mi, non accumsan justo diam et enim. Proin finibus ligula nec elit maximus, sit amet viverra leo sagittis. Donec fringilla ultrices nunc, at condimentum est imperdiet vitae. Praesent gravida lacus nec euismod tempor.</p>
</div>
</div>
<script src="jquery-3.1.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>
</body>
</html>
body
{
background-color:#303030;
color:#ffffff;
font-size:20px;
font-family: 'Lato', sans-serif;
margin:0 !important;
}
.wrapper
{
width:100%;
}
.logo
{
margin-left:auto;
margin-right:auto;
font-size:38px;
text-align:center;
border:1px solid #ffffff;
width:450px;
padding:10px;
margin-top:45px;
font-weight:700;
letter-spacing:3px;
}
.nav
{
width:100%;
background-color:red;
text-align:center;
}
.content
{
width:1000px;
margin-left:auto;
margin-right:auto;
text-align:justify;
padding:20px;
}
.sticky
{
width:100%;
position:fixed;
left:0;
top:0;
z-index:100;
}
ol
{
list-style-type:none;
margin:0;
padding:0;
display:inline-block;
line-height:200%;
}
ol > li > a
{
text-decoration:none;
color:#ffffff;
display:block;
}
ol > li
{
float:left;
width:150px;
height:40px;
border-right:1px dashed #751b1b;
}
ol > li:first-child
{
border-left:1px dashed #751b1b;
}
ol > li:hover
{
background-color:#cf6969;
}
ol > li > a:hover
{
color:#451717;
}
ol > li > ul
{
list-style-type:none;
display:none;
margin:0;
padding:0;
background-color:red;
}
ol > li:hover > ul
{
display:block;
}
ol > li > ul > li >a
{
text-decoration:none;
color:#ffffff;
display:block;
}
ol > li > ul > li:hover
{
background-color:#c34f4f;
}
ol > li > ul > li >a:hover
{
color:#451717;
}
ol > li > ul > li
{
border-top:1px dashed #751b1b;
position:relative;
z-index:100;
}
Witam!
Jestem początkującym w tematyce. Mam problem z rozwijaną listą menu głównego. Belka menu jest sticky czyli w momencie scrolowania w dół strony pozostaje ona widoczna w górnej krawędzi witryny. Wówczas rozwijana lista menu działa poprawnie - wyświetla się na pierwszym planie.
Problem pojawią się gdy strona jest przewinięta do samej góry. Wtedy rozwijanie menu pojawia się poza tekstem głównym. Wygląda na to, że komendy position:relative; oraz z-index:100; nie działa poprawnie.
Czy ktoś potrafi pomóc?
