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

Sticky navbar

Object Storage Arubacloud
0 głosów
240 wizyt
pytanie zadane 28 kwietnia 2018 w HTML i CSS przez Bish0p Obywatel (1,940 p.)

Witam 

Jestem w trakcie nauki HTML i CSS, podczas 3 odc. "Kurs CSS odc. 3: Rozwijane, przyklejane menu główne (sticky)" pokazywane było jak zrobić owy sticky bar. 

Problemem jest że mam prawie identycznie (różnie się tym że nie używałem class ) a sticky bar nawet nie drgnie :P

Jakby ktoś mi wytłumaczył czym to jest spowodowane byłbym wdzięczny :D

HTML

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<title>Gry retro</title>
	
	<meta name="description" content="Wszytsko o grach z lat 90' i wcześniej" />
	<meta name="keywords" content="gry,stare,retro,beka" />
	<link rel="stylesheet" href="gry.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
	<link rel="stylesheet" href="fontello-50b96ec5/css/fontello.css" type="text/css" />
	
</head>
<body>
	<div id="container" > 
		<div id="header">
			<div id="logo">
				<img src="pad.png" style="float:left;" style="margin-right:3px;"/>   
			<span style="color:#cc0000"> Retro</span>gry.com
			</div>
			<div style="both:clear;"></div>
		</div>
		<div id="nav">
		
		
		</div>
		<div id="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla hendrerit dapibus erat ac laoreet. Sed ut elit eget nisi bibendum sagittis. Quisque sed posuere purus. Nulla non arcu mauris. Aenean convallis tortor in pharetra tristique. Cras tincidunt ligula quam. In lectus tortor, ullamcorper ac pellentesque sit amet, tristique condimentum libero. Ut odio ex, cursus nec ex vitae, consectetur sodales sem.</p> 
		
		<p>Ut ac leo justo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum blandit leo non erat bibendum condimentum. Maecenas dapibus elit ante, sed aliquet mi semper in. Nullam iaculis magna arcu, nec laoreet turpis pretium eget. Nulla sit amet pellentesque lectus. Vivamus fringilla a tellus vel pellentesque. In dignissim, ipsum eu feugiat vulputate, purus nibh malesuada diam, ornare semper nisl lectus a dolor. Fusce in imperdiet lectus, scelerisque rutrum justo. Cras laoreet condimentum neque, vitae ultrices est tempus sit amet. Etiam pellentesque ipsum vel mi aliquet dignissim in in nulla. Sed posuere, diam facilisis consectetur hendrerit, ex nibh rutrum sapien, eu feugiat erat ex ut turpis. In justo justo, ornare a commodo id, venenatis eu nulla.</p>  
		
		<p>Praesent ornare, nulla sit amet posuere elementum, orci risus auctor ligula, sit amet placerat massa tortor sit amet sem. Quisque a tincidunt urna. Praesent at velit nec mauris malesuada sagittis. Suspendisse efficitur malesuada eleifend. Mauris porttitor pretium magna, a imperdiet lorem egestas eget. Etiam placerat, dolor sed condimentum faucibus, metus velit gravida orci, ut maximus ligula diam eu urna. Duis aliquam justo quis diam elementum lacinia. Morbi dapibus sed velit ut efficitur. Nulla fermentum placerat lectus, id cursus ipsum laoreet id. Phasellus at turpis placerat, aliquam nunc tristique, semper sem. Nulla in viverra enim. Nullam porta, orci vitae dapibus iaculis, quam neque maximus arcu, id interdum enim augue eget orci.</p>  
		
		<p>Curabitur eu suscipit nibh, eu dignissim nisi. Curabitur mauris elit, porttitor in libero vel, convallis blandit ex. Vivamus maximus porttitor nulla, nec interdum risus ullamcorper quis. In hac habitasse platea dictumst. Vestibulum ultrices venenatis libero ut tincidunt. Aliquam laoreet blandit quam nec feugiat. Mauris placerat nisl at sapien scelerisque, vel mattis risus aliquet. Cras id enim ut dolor varius ultricies. Sed laoreet lorem massa, sed hendrerit nulla efficitur eu. Mauris porttitor urna ac nisi vehicula tempus. 
		Mauris pulvinar ante sit amet gravida efficitur. Pellentesque lectus est, euismod eget dapibus suscipit, tincidunt eget leo. Suspendisse tempus nisi felis, et ornare risus tristique et. Vestibulum tincidunt libero ac felis mattis lacinia. Curabitur convallis imperdiet tortor, ut tristique orci ultricies vel.</p>  
		
		<p>Vestibulum lacinia et est eu auctor. Phasellus rhoncus urna sed ipsum posuere scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec aliquet tortor. Fusce ac nulla in lorem interdum tincidunt ac id est. Nulla condimentum enim tellus, a molestie nisl bibendum a. Sed elit orci, vehicula eu ex a, hendrerit faucibus sem. Vivamus turpis ex, suscipit ut sodales in, auctor et ipsum. Pellentesque posuere posuere quam a molestie. Nullam posuere interdum massa varius tempor. Aenean venenatis ipsum et erat eleifend hendrerit.</p>  
		
		</div>
		<div id="socials">
			<div id="socdivs">
				<div class="yt"><a href="https://www.youtube.com/" class="sociallink" target="_blank"> 
				<i class="icon-youtube"></i>	</a>		</div>
				<div class="fb"><a href="https://www.facebook.com/" class="sociallink" target="_blank">
				<i class="icon-facebook-official">	</i> </a>	</div>
				<div class="tw"><a href="https://twitter.com/" class="sociallink" target="_blank">
				<i class="icon-twitter">	</i>	</a>		</div>
				<div class="go"><a href="https://plus.google.com/?hl=pl" class="sociallink" target="_blank">
				<i class="icon-gplus">	</i>	</a>			</div>
				<div style="clear:both;"></div>
			</div>
		</div>
		<div id="footer">Mateusz Biskup &copy; 2018 Wszelkie prawa zastrzeżone</div>
	</div>
	
	<script src="jquery-3.3.1.min.js"></script>
	
</body>
</html>

CSS

body
{
	background-color:#303030;
	color:#ffffff;
	font-family: 'Lato', sans-serif;
	font-size:20px;
	margin: 0 !important;
}
#container
{
	width:100%;
}
#header
{
	width:100%;
	padding:40px 0;
}
#logo
{
	width:450px;
	margin-left:auto;
	margin-right:auto;
	font-size:50px;
	padding:10px 0;
	
}
#nav
{
	width:100%;
	background-color:#cc0000;
	height:70px;
	margin-top:10px;
	margin-bottom:10px;
	margin-right:5px;
	margin-left:5px;
}
#content
{
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	text-align:justify;
	padding:5px;
}
#socials
{
	width:100%;
	background-color:#202020;
	height:175px;
	margin-top:20px;
	text-align:center;
}
#socdivs
{
	width:970px;
	height:135px;
	padding:20px;
	margin-left:auto;
	margin-right:auto;
	
	
}
.yt
{
	float:left;
	margin-left:15px;
	margin-right:15px;
	width:210px;
	height:110px;
}
.yt:hover
{
		background-color:#f00f0f;
		cursor:pointer;
}
.fb
{
	float:left;
	margin-left:15px;
	margin-right:15px;
	width:210px;
	height:110px;
}
.fb:hover
{
	background-color:#3333ff;
	cursor:pointer;
}
.tw
{
	float:left;
	margin-left:15px;
	margin-right:15px;
	width:210px;
	height:110px;
}
.tw:hover
{
	background-color:#66b3ff;
	cursor:pointer;
}
.go
{
	float:left;
	margin-left:15px;
	margin-right:15px;
	width:210px;
	height:110px;
}
.go:hover
{
	background-color: #dd4b39;
	cursor:pointer;
}	
a.sociallink
{
	display:block;
	text-decoration:none;
	width:210px;
	height:110px;
	color:#ffffff;
}
#footer
{
	background-color:#101010;
	text-align:center;
	width:100%;
	padding:20px;
}
.sticky
{
	width:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:100;	
}

Z góry dziekuje

2 odpowiedzi

+1 głos
odpowiedź 28 kwietnia 2018 przez pablop76 VIP (123,180 p.)
1.Popraw kolor tekstu w pytaniu. Zmieniłeś na czarny i nic nie widać. Niektórzy (tak jak  ja) mają ustawione ciemne tło strony.

2.html umieść w bloczku html.

3.css umieść w bloczku css.

A jeżeli chodzi o pytanie to  gdzie javascript odpowiadający za dodanie klasy?
+1 głos
odpowiedź 28 kwietnia 2018 przez BT101 Stary wyjadacz (12,540 p.)

No ale przecież tu nie ma żadnego JS'a, którego MZ tam użył żeby zrobić ten navbar "sticky".. Dołączyłeś tylko jQuery ale nie ma żadnego skryptu z użyciem tej biblioteki

 

<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>

PS. dałeś zły format bloczku kodu HTMLa.

Podobne pytania

0 głosów
1 odpowiedź 129 wizyt
pytanie zadane 2 czerwca 2020 w HTML i CSS przez Jajestem Użytkownik (670 p.)
+1 głos
0 odpowiedzi 244 wizyt
pytanie zadane 13 lutego 2022 w HTML i CSS przez trixter310 Obywatel (1,440 p.)
0 głosów
1 odpowiedź 121 wizyt
pytanie zadane 28 czerwca 2020 w HTML i CSS przez niezalogowany

92,660 zapytań

141,553 odpowiedzi

319,993 komentarzy

62,028 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!

...