Witajcie. Mam do was pytanko. Chodzi mi o sticky a dokładnie o efekt często spotykany. Chodzi mi o to że kiedy przywijam strone na dół Logo pojawia się na pasku menu.
HTML:
<! DOCTYPE HTML>
<html lang="PL">
<head>
<meta charset="UTF-8" />
<title>Polska</title>
<meta name="description" content="Strona poświęcona państwu Polskiemu!" />
<meta name="keywords" content="Polska, Polacy, państwo, kraj, Ojczyzna" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Lato|Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href="css/fontello.css" type="text/css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="time.js" ></script>
<script type="text/javascript" src="wprowadz.js" ></script>
</head>
<body onload="odliczanie();">
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="img/herb.png" height="120px" width="110px" style="float: left; margin-right: 15px; margin-left: 20px;">Polska<br /><span style="color: #D4213D;">Nec temere, nec timide</span><div id="zegar"></div>
</div>
</div>
<div id="nav">
<ol>
<li><a href="Polska-ojczyzna">Strona Główna</a></li>
<li><a href="aktu.html">Aktualności</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="forum/index.php">Forum</a></li>
<li><a href="info.html">Informacje</a>
<ul>
<li><a href="polacy.html">Dla Polaków</a></li>
<li><a href="polonia.html">Dla Poloni</a></li>
</ul></li>
<li><a href="formularze-support-donate">Forumualrze</a></li>
</ol>
</div>
<div id="container">
<div id="Powitanie">
Wprowadź nick: <input type="text" id="pole2" />
<input type="submit" value="Wprowadź" onclick="wprowadz();" />
</div>
<div id="sidebar">
<a href="etm.html"><div class="option">Etymologia</div></a>
<a href="historia.html"><div class="option">Historia</div></a>
<a href="ustroj.html"><div class="option">Ustrój</div></a>
<a href="wojsko.html"><div class="option">Siły zbrojne</div></a>
<a href="admin.html"><div class="option">Administracja</div></a>
<a href="geo.html"><div class="option">Geografia</div></a>
<a href="kultura.html"><div class="option">Kultura</div></a>
<a href="gospo.html"><div class="option">Gospodarka</div></a>
<a href="demo.html"><div class="option">Demografia</div></a>
<a href="krajobraz-Polska"><div class="option">Galeria</div></a>
<a href="gra.html"><div class="option">Wisielec</div></a>
</div>
<div id="content">
<span class="bigtitle">Polska</span><audio src="MazurekDabrowskiego.mp3" id="player" controls></audio>
<div style="height: 15px;"></div>
<div class="dottedline"></div>
<p>Polska, Rzeczpospolita Polska (RP) – państwo unitarne w Europie Środkowej położone między Morzem Bałtyckim na północy a Sudetami i Karpatami na południu, w przeważającej części w dorzeczu Wisły i Odry. Powierzchnia administracyjna Polski wynosi 312 679 km², co daje jej 70. miejsce na świecie i 9. w Europie. Zamieszkana przez prawie 38,5 miliona ludzi (2014), zajmuje pod względem liczby ludności 34. miejsce na świecie, a 6. w Unii Europejskiej.Od północy Polska graniczy z Rosją (z jej obwodem kaliningradzkim) i Litwą, od wschodu z Białorusią i Ukrainą, od południa ze Słowacją i Czechami, od zachodu z Niemcami. Większość północnej granicy Polski wyznacza wybrzeże Morza Bałtyckiego. Polska Wyłączna Strefa Ekonomiczna na Bałtyku graniczy ze strefami Danii i Szwecji.</p>
</div>
<div id="socials">
<div class="socialsdiv">
<a href="#"><div class="fb">
<i class="icon-facebook"></i>
</div></a>
<a href="#"><div class="tw">
<i class="icon-twitter"></i>
</div></a>
<a href="#"><div class="yt">
<i class="icon-youtube"></i>
</div></a>
<a href="#"><div class="gplus">
<i class="icon-gplus"></i>
</div></a>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="footer">
Visit us Again © Wszelkie prawa zastrzeżone. Michał Warmuz 2015
</div>
</div>
<script>
$(document).ready(function() {
var stickyNavTop = $('#nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('#nav').addClass('sticky');
} else {
$('#nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
</script>
</body>
</html>
CSS:
body {
background-color: #303030;
font-family: 'Lato', sans-serif;
margin: 0 !important;
font-size: 20px;
color: #FFFFFF;
}
#powitanie {
background-color: #222222;
padding: 10px;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
}
#header {
padding: 40px 0;
width: 100%;
}
#logo {
font-size: 42px;
letter-spacing: 3px;
font-weight: 900;
font-family: 'Josefin Sans', sans-serif;
}
#nav {
background-color: #D4213D;
text-align: center;
color: white;
padding: 10px;
border: 4px solid #E5324E;
margin-bottom: 20px;
}
ol {
list-style-type: none;
height: 47px;
line-height: 200%;
display: inline-block;
margin: 0;
font-size: 24px;
}
ol a {
color: white;
text-decoration: none;
display: block;
}
ol > li {
float: left;
width: 200px;
}
ol > li:hover {
background-color: #E5324E;
}
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: #CF6969;
position: relative;
z-index: 100;
border-top: 1px dashed #751B1B;
}
ol > li > ul > li:hover {
background-color: #C34F4F;
}
ol > li > ul > li:hover > a {
color: #451717;
}
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
#sidebar {
min-height: 720px;
width: 182px;
background-color: #D4213D;
border: 4px solid #E5324E;
padding: 10px;
text-align: center;
float: left;
font-size: 24px;
}
#content {
width: 730px;
min-height: 700px;
float: left;
border: 4px solid #dddddd;
background-color: #cccccc;
padding: 20px;
text-align: justify;
margin-left: 10px;
color: #000000;
margin-bottom: 20px;
}
.option {
border-bottom: 2px dotted #E5324E;
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
}
.option:hover {
background-color: #E5324E;
}
#socials {
text-align: center;
width: 100%;
margin-bottom: 20px;
}
.socialsdiv {
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.fb {
width: 250px;
height: 155px;
float: left;
}
.fb:hover {
background-color: #4668B3;
}
.tw {
width: 250px;
height: 155px;
float: left;
}
.tw:hover {
background-color: #3095D3;
}
.yt {
width: 250px;
height: 155px;
float: left;
}
.yt:hover {
background-color: #D94348;
}
.gplus {
width: 250px;
height: 155px;
float: left;
}
.gplus:hover {
background-color: #D95333;
}
#footer {
clear: both;
background-color: #ff7502;
min-height: 20px;
text-align: center;
padding: 10px;
border: 4px solid #dd5300;
}
.bigtitle {
font-size: 32px;
font-weight: 900;
letter-spacing: 2px;
clear:both;
}
.dottedline {
height: 5px;
marign-top: 15px;
margin-bottom: 20px;
border-bottom: 2px dotted #444444
}
.sticky {
width: 100%;
top: 0;
left: 0;
z-index: 100;
position: fixed;
}
#player {
float: right;
background-color: #cccccc
}
input[type="text"]
{
padding: 5px;
}
input[type="password"]
{
padding: 5px;
}
input[type="submit"]
{
padding: 10px;
}
input[type="reset"]
{
padding: 10px;
}
#zegar {
float: right;
margin-right: 20px;
}
a {
color: white;
text-decoration: none;
}
#pojemnik {
background-color: black !important;
font-family: 'Inconsolata';
width: 730px;
color: white;
margin-right: auto;
margin-left: auto;
}
#plansza {
width: 730px;
margin-top: 50px;
margin-bottom: 50px;
text-align: center;
font-size: 48px;
min-height: 60px;
}
#szubienica {
float: left;
text-align: center;
width: 450px;
height: 280px;
}
#kategoria {
float: left;
width: 280px;
}
#alfabet {
text-align: center;
width: 450px;
}
.litera {
width: 30px;
height: 30px;
text-align: center;
padding: 5px;
margin: 5px;
border: 3px solid gray;
float: left;
cursor: pointer;
border-radius: 15px;
}
.litera:hover {
background-color: #222222;
color: white;
border: 3px solid white;
}
.reset {
color: green;
cursor: pointer;
font-size: 48px;
}
.reset:hover {
color: white;
}
#content_gra {
width: 730px;
min-height: 780px;
float: left;
border: 4px solid #111111;
background-color: #000000;
padding: 20px;
text-align: justify;
margin-left: 10px;
color: white;
margin-bottom: 20px;
}
#sidebar_gra {
min-height: 800px;
width: 182px;
background-color: #D4213D;
border: 4px solid #E5324E;
padding: 10px;
text-align: center;
float: left;
font-size: 24px;
}
