Witam. 3 odcinek css oglądam i mam problem ,gdyż nie działa mi przyklejanie menu głównego i nie wiem dlaczego. Proszę o pomoc.
Plik html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Elektryczne porady najlepszej filmy na rynku ,zajrzyj !">
<meta name="keywords" content="elektryk, firma, rozdzielnia">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/fontello.css">
<title> Elektryk Warszawa </title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="piorun.ico" alt="nima" style="height:48px; width:48px; float:left;">
<span style="color: green; clear:both;">open</span> - Firma Elektryczna
</div>
</div>
<div class="nav">
</div>
<div id="content"><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eleifend sit amet justo sed maximus. Duis nec tortor id orci egestas luctus. Nunc vestibulum odio id nisl rhoncus, ut aliquet orci ultrices. Praesent imperdiet, arcu in porttitor rhoncus, augue elit dapibus neque, id fringilla lacus metus sit amet nunc. Vestibulum sodales lobortis est, sed scelerisque nunc cursus scelerisque. In laoreet at mi congue iaculis. Vivamus sed diam bibendum, commodo felis eu, pellentesque augue. Morbi ac erat vestibulum, eleifend urna a, porta ex. Quisque ac lacus nec quam porta dictum. Morbi nunc mi, posuere ut risus ac, dictum congue risus. Donec quam ipsum, pulvinar a malesuada eu, molestie et arcu. Pellentesque vehicula, orci at luctus accumsan, sem magna egestas tellus, tempor posuere tortor justo ac dui. Suspendisse mollis est a pellentesque porta.<br><br><br><br>
Curabitur ut urna sed massa tempus cursus. Sed nisl mi, scelerisque in semper vel, placerat sit amet risus. Donec nec mi eu lectus ultricies molestie sed accumsan orci. Donec pellentesque sed massa a gravida. Maecenas ante neque, ultricies ut vulputate sed, elementum a nibh. Nulla et euismod orci. Maecenas porta metus mattis, tempus est non, commodo diam. Ut hendrerit lorem sit amet nunc vehicula, at efficitur lorem maximus. Fusce eleifend mi et sem scelerisque rhoncus. Praesent non lacus sed lorem eleifend tincidunt in nec orci. Quisque mattis nisl vel dui cursus finibus. Ut feugiat ultricies fringilla. Sed id egestas odio. Sed hendrerit bibendum tellus, sit amet varius ex molestie eu.<br><br><br><br>
Mauris quis nibh mollis, blandit mauris eget, lacinia lacus. Mauris non velit nibh. Sed vehicula luctus turpis ac cursus. Phasellus et odio dui. Etiam id porta enim, eget blandit sem. Donec nec erat eget mauris semper sagittis nec mattis diam. In ut est vel augue dapibus sagittis. Ut ut porttitor arcu. Maecenas nec placerat ex, vel auctor erat.<br><br><br><br>
Vivamus aliquam, lacus eget condimentum bibendum, arcu sem facilisis nunc, venenatis aliquam diam diam eget urna. Ut condimentum ligula in sem consectetur facilisis. Sed placerat varius lectus, non suscipit libero pulvinar eget. Sed justo nibh, fermentum at vulputate sed, sodales vel quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut diam vel turpis dignissim blandit at a nisl. Nam ut tortor at tellus lobortis placerat. Mauris nibh nulla, imperdiet id mattis nec, tempus vel elit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam rhoncus dui nibh, vitae ullamcorper ligula rhoncus sit amet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas vestibulum maximus sem quis faucibus. Morbi gravida mattis diam, sit amet euismod purus varius ac. Vivamus nibh ex, gravida ac dictum a, tincidunt eu mauris. Morbi in metus vel tellus interdum accumsan.<br><br><br><br>
Fusce risus quam, luctus et orci et, laoreet gravida enim. Morbi efficitur mollis risus eget tincidunt. Curabitur malesuada massa urna. Pellentesque sit amet suscipit dui. Integer bibendum et sem quis consectetur. Aliquam vel metus arcu. Cras finibus tempor fermentum. Suspendisse metus leo, porta ut euismod quis, ornare non ligula. Vivamus vel mi vitae nisl facilisis porta. Praesent laoreet scelerisque neque vitae ultricies. Aenean non porta risus, sit amet porta massa. Nam tincidunt, sapien in congue cursus, orci ligula eleifend nisi, a ultricies erat lorem quis neque.<br><br><br><br>
</div>
<div id="socials">
<div id="socialdivs">
<div id="fb">
<i class="icon-facebook"></i>
</div>
<div id="tw">
<i class="icon-twitter"></i>
</div>
<div id="yt">
<i class="icon-youtube"></i>
</div>
<div id="gp">
<i class="icon-gplus"></i>
</div>
<div style="clear:both;"> </div>
</div>
</div>
<div id="footer">
open © 2016 - elektrycy górą!
</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(NavY > StickyNav)
{
$('.nav').addClass('sticky');
}
else
{
$('.nav').removeClass('sticky');
}
}
StickyNav();
$(window).scroll(function()
{
stickyNav();
});
});
</script>
</body>
</html>
plik css:
h1
{
color: green;
font-size: 48px;
}
body
{
background-color: #303030;
font-size:20px;
color: #ffffff;
font-family: 'Lato', sans-serif;
margin: 0;
}
#wrapper
{
width: 100%;
}
#header
{
width: 100%;
padding: 40px 0;
}
#logo
{
margin-left:auto;
margin-right: auto;
width: 50%;
font-size: 48px;
}
.nav
{
width: 100%;
padding: 10px 0;
background-color: #DC143C;
text-align: center;
border-top: 1px solid #CB032B;
border-bottom: 1px solid #CB032B;
}
#content
{
width: 70%;
margin-left:auto;
margin-right:auto;
text-align: justify;
}
#socials
{
background-color: #292929;
}
#socialdivs
{
width: 1000px;
margin-left:auto;
margin-right: auto;
text-align:center;
}
#footer
{
text-align: center;
padding: 20px 0;
background-color: #222222;
}
#fb
{
float: left;
background-color: #4668b3;
width: 250px;
padding: 40px 0;
}
#fb:hover
{
background-color: #3557a2;
}
#yt
{
width: 250px;
float: left;
background-color: #d94348;
padding: 40px 0;
}
#yt:hover
{
background-color: #c83237;
}
#tw
{
width: 250px;
float: left;
background-color: #3095d3;
padding: 40px 0;
}
#tw:hover
{
background-color: #2084c2;
}
#gp
{
width: 250px;
float: left;
background-color: #d95333;
padding: 40px 0;
}
#gp:hover
{
background-color: #c84222;
}
.sticky
{
width:100%;
position: fixed;
left: 0;
top: 0;
z-index:100;
}
Z gory dziękuję i pozdrawiam !
