• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

nawigacja sticky nie dziala

Object Storage Arubacloud
0 głosów
360 wizyt
pytanie zadane 28 listopada 2016 w JavaScript przez madmi121 Użytkownik (760 p.)
zmienione kategorie 28 listopada 2016 przez madmi121

Ćwiczę z 3 częścią kursu CSS Mirosława Zelenta i próbuję dodać "sticky" ale cos mi nie dziala. Nie wiem co zrobiłem źle. Plik jquery mam w folderze. Proszę o pomoc.

<!DOCTYPE HTML> 
<html lang='pl'> 
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1'>
	<title></title>
	<link rel='stylesheet' href='style.css'>
	<link rel="stylesheet" href="SlickNav/slicknav.css" />
<script src="SlickNav/jquery.slicknav.min.js"></script>

</head>
<body>

<div id="strona">
<nav id="nav">
<label for="show-menu" class="show-menu"><span>Menu</span><div class="lines"></div></label>
	<input type="checkbox" id="show-menu">
		<ul id="menu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
	
	
</div>




	
<script src="js/jquery-1.11.1.min.js"></script>
<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>
*{
  margin:0;
  padding:0;
}
body {
	font-family: Helvetica, Arial, sans-serif;
  font-size:16px;
   
}

#strona{
    
    height: 2000px;
}

.sticky
{
    width: 100%;
    position: fixed;
    left: 0;
    top:0;
    z-index: 100;
}

#nav {
  display:block;
  width:100%;

line-height: 1.6em;
font-weight: 400;
width:100%;
text-align:center;
	position: relative;
  margin:0 auto;
}
/*Strip the ul of padding and list styling*/
#nav ul {
	list-style-type:none;
  margin: 0 auto;
  padding-left:0;
  text-align:center;
  width:100%;
  position: absolute;
  
    
    
    
    background: rgb(51,51,51); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
}

/*Create a horizontal list with spacing*/
#nav li {
	display:inline-block;
	/*float: left;
	margin-right: 1px;*/
}

/*Style for menu links*/
#nav li a {
	display:block;
	min-width:140px;
	text-align: center;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
  text-transform:uppercase;
	
	text-decoration: none;
  margin-left:-5px;
  padding: 10px 0;  
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
    
    
    background: rgb(51,51,51); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(100%,rgba(17,17,17,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(51,51,51,1) 0%,rgba(17,17,17,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=0 ); /* IE6-9 */
    
    
}

/*Hover state for top level links*/
#nav li:hover a {
	color: red;
  background-color:#ccddee;
}

/*Style for dropdown links*/
#nav li:hover ul a {
	background: #f3f3f3;
	color: #2f3036;
	height: 40px;
	line-height: 40px;
}

/*Hover state for dropdown links*/
#nav li:hover #nav ul a:hover {
	color: #4db3ff;
}

/*Hide dropdown links until they are needed*/
#nav li ul {
	display: none;
}

/*Make dropdown links vertical*/
#nav li ul li {
	display: block;
	float: none;
}

/*Prevent text wrapping*/
#nav li ul li a {
	width: auto;
	min-width: 100px;
	padding: 0 20px;
}


/*Style 'show menu' label button and hide it by default*/
#nav .show-menu {
	text-decoration: none;
	color: #fff;
	background: #8aa8bd;
	text-align: center;
	padding: 10px 15px;
	display: none;
  cursor: pointer;
  text-transform: uppercase;
}

#nav .show-menu span{
   padding-left: 35px;
}

/*Hide checkbox*/
#nav input[type=checkbox]{
    display: none;
}

/*Show menu when invisible checkbox is checked*/
#nav input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/

@media screen and (max-width : 800px){
  #nav .lines {
    border-bottom: 15px double #f8f8f8; 
    border-top: 5px solid #f8f8f8; 
    content:"";
    height: 5px; 
    width:20px;
    padding-right:15px;
  float: right;
}
	/*Make dropdown links appear inline*/
	#nav ul {
		position: static;
		display: none;
	}
	/*Create vertical spacing*/
	#nav li {
		margin-bottom: 1px;
	}
	/*Make all menu links full width*/
	#nav ul li, #nav li a {
		width: 100%;
	}
	/*Display 'show menu' link*/
	#nav .show-menu {
		display:block;
	}
}

 

komentarz 28 listopada 2016 przez jaca121212 Nałogowiec (40,760 p.)
Zmień kategorię pytania z programowanie na jquery

1 odpowiedź

+1 głos
odpowiedź 28 listopada 2016 przez Czort Nałogowiec (32,500 p.)
Wygląda na to, że position:relative; w #nav jest sprawcą problemu.
komentarz 28 listopada 2016 przez madmi121 Użytkownik (760 p.)
działa,dzieki za pomoc

Podobne pytania

0 głosów
2 odpowiedzi 1,152 wizyt
pytanie zadane 17 lutego 2018 w HTML i CSS przez kurczakmaly Nowicjusz (120 p.)
0 głosów
1 odpowiedź 615 wizyt
0 głosów
2 odpowiedzi 158 wizyt
pytanie zadane 7 kwietnia 2021 w HTML i CSS przez Nearr Obywatel (1,890 p.)

92,634 zapytań

141,505 odpowiedzi

319,883 komentarzy

62,015 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...