Witam wszystkich, mam problem z JavaScript. Robiłem wszystko jak pan mirosław na filmie ale mi Menu nie chce się przyłączyć do górnej bariery, To jest mój HTML i CSS:
<!DOCTYPE HTML>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title> ASG Polska</title>
<meta name="description" content="ASG Polska" />
<meta name="keywords" content="Wpisz tutaj tagi"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/fontello.css" type="text/css"/>
<link href='
http://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="start">
<ol>
<li><a href="#">Strona główna</a></li>
<li><a href="#">Sklepy</a>
<ul>
<li><a href="#">GunFire.pl</a></li>
<li><a href="#">Militaria.pl</a></li>
<li><a href="#">Tanie Militaria</a></li>
<li><a href="#">Kolejny Sklep</a></li>
</ul>
</li>
<li><a href="#">Forum</a>
<ul>
<li><a href="#">Główne Wątki</a></li>
<li><a href="#">Wątki Poboczne</a></li>
<li><a href="#">Pomoc</a></li>
<li><a href="#">Kolejna Opcja</a></li>
</ul>
</li>
<li><a href="#">Wydarzenia</a>
<ul>
<li><a href="#">Spotkania</a></li>
<li><a href="#">Zawody</a></li>
<li><a href="#">Gry i zapisy</a></li>
</ul>
</li>
<li><a href="#">Społeczność</a>
<ul>
<li><a href="#">Galeria</a></li>
<li><a href="#">YouTube</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Twitter</a></li>
</ul>
<li><a href="#">Informacje</a>
<ul>
<li><a href="#">Kim Jesteśmy?</a></li>
<li><a href="#">Jak działamy?</a></li>
<li><a href="#">Uzyskaj pomoc</a></li>
<li><a href="#">Opisy Air Soft</a></li>
</ul>
</li>
<li><a href="#">Dotacja</a></li>
</ol>
</div>
<div class="container" >
<div class="logo" >
Strona pośiwięcona ASG Air Soft Polska
</div>
<div class="menu" >
Troche java skryptu
</div>
<div class="content" >
</br></br></br></br></br></br>
Tutaj będa pojawiały sie wszystkie nowości</br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper in mi sed dictum. Aenean et maximus nisl. Maecenas non metus maximus, imperdiet nisi eu, placerat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam justo purus, dictum at pellentesque nec, pharetra in mauris. Quisque ac cursus enim, vitae aliquam erat. Ut finibus, nulla ac pulvinar pulvinar, tellus augue commodo urna, sed finibus quam urna quis diam. Praesent gravida semper velit, ut bibendum elit molestie a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula nisi a libero faucibus auctor. Ut felis sapien, placerat non gravida sed, tempor eget nulla. Nullam scelerisque fermentum quam. Morbi posuere aliquet lacus non venenatis.
</div>
<div class="social" >
<div class="square">
<div class="yt"><i class="icon-youtube"></i></div>
<div class="fb"><i class="icon-facebook"></i></div>
<div class="gplus"><i class="icon-gplus"></i></div>
<div class="tw"><i class="icon-twitter"></i></div>
<div style="clear:both;"></div>
</div>
<div class="footer" >
Air Soft Polska 2015 © Wszelkie prawa zastrzeżone!
</div>
</div>
<script src="jquery-1.11.3.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>
</script>
</body>
</html>
body
{
background-color: #ffffff;
font-family: 'Oswald', sans-serif;
margin: 0 !important;
}
.start
{
width: 100%;
padding: 10px 0;
background-color: #E5AD4B;
text-align: center;
}
.container
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.logo
{
padding: 5px;
width: 980px;
font-size: 700;
background-color: #000000;
color: #ffffff;
text-align: center;
border-top: 10px;
clear: both;
}
.menu
{
padding: 20px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
}
.content
{
padding: 10px;
text-align: center;
font-size: 20px;
}
.social
{
}
.footer
{
text-align: center;
padding: 5px;
background-color: #000000;
color: #ffffff;
}
.yt
{
margin: 10px;
width: 230px;
height: 70px;
background-color: #d94348;
float: left;
text-align: center;
}
.yt:hover
{
background-color: #c83237;
cursor: pointer;
}
.fb
{
margin: 10px;
width: 230px;
height: 70px;
background-color: #4668b3;
float: left;
text-align: center;
}
.fb:hover
{
background-color: #3557a2;
cursor: pointer;
}
.gplus
{
margin: 10px;
width: 230px;
height: 70px;
background-color: #d95333;
float: left;
text-align: center;
}
.gplus:hover
{
background-color: #c84222;
cursor: pointer;
}
.tw
{
margin: 10px;
width: 230px;
height: 70px;
background-color: #3095d3;
float: left;
text-align: center;
}
.tw:hover
{
background-color: #2084c2;
cursor: pointer;
}
ol
{
padding: 0;
margin: 0;
list-style-type: none;
font-size: 18px;
height: 35px;
line-height: 200%;
display: inline-block;
text-align: center;
}
ol a
{
color: #ffffff;
text-decoration: none;
display: block;
}
ol > li
{
float: left;
width: 150px;
height: 40px;
border-right: 1px solid #ffffff;
}
ol > li:first-child
{
border-left: 1px solid #ffffff;
}
ol > li:hover
{
background-color: #FFBC00;
}
ol > li:hover > a
{
color: #451717;
}
ol > li > ul
{
list-style-type: none;
padding: 0;
margin: 0;
height: 40px;
display: none;
}
ol > li:hover > ul
{
display: block;
}
ol > li > ul > li
{
background-color:#FFBC00;
position: relative;
z-index: 100;
border-top: 1px dashed #751b1b;
}
ol > li > ul > li:hover
{
background-color: #FFBC00;
}
ol > li > ul > li:hover > a
{
color: #451717;
}
