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

question-closed Przyklejane menu, automatyczne przewijanie strony

VPS Starter Arubacloud
0 głosów
288 wizyt
pytanie zadane 3 lipca 2019 w JavaScript przez FilOON Użytkownik (680 p.)
zamknięte 8 lipca 2019 przez FilOON

Witam, mój problem polega na tym że:
1) Moje przyklejane menu zasłania podtytuły do których strona się przewija. Da się jakoś zrobić by strona przewijała się za każdym razem o 50px mniej, czy jedynym rozwiązaniem jest po prostu zakotwiczyć przewijanie do elementu wyżej do jakiegoś chociażby <br>?

2) Po wejściu na stronę, dopóki zwyczajnie scrolluję, wszystko działa. Lecz po kliknięciu w dowolną zakładkę i po powróceniu do górnej krawędzi menu przeskakuje o kilka centymetrów w prawo a po scrollowaniu w dół znów odskakuje w lewo. Po odświeżeniu jest wszystko dobrze aż do kliknięcia w którąś z zakładek.

3)Przy klikaniu w zakładki występuje takie milisekundowe "odświeżenie strony", takie mignięcie.

 

Kod menu:

<div class="nav">
			<ul>
				<li><a id="link1" href="#">O MNIE</a></li>
				<li><a id="link2" href="#">PORTFOLIO</a></li>
				<li><a id="link3" href="#">CENNIK</a></li>
				<li><a id="link4" href="#">KONTAKT</a></li>
			</ul>
		</div>

Kod CSS:

body
{
	background-color: #ffffff;
	color: #000000;
	margin: 0 !important;
	font-family: 'Roboto', sans-serif;
}
 #container
 {
	 width: 100%;
	 margin-left: auto;
	 margin-right: auto;
 }
 
 #content
 {
	 width: 1500px;
	 margin-left: auto;
	 margin-right: auto;
 }
 
 #footer
 {
	 width: 100%;
	 padding: 10px;
	 color: #ffffff;
	 background-color: #000000;
	 text-align: center;
 }
 
 .nav
 {
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 50px;
	 padding: 0x 0px;
	 text-align: center;
	 background-color: #ffffff;
	 text-align: center;
	 font-weight: bold;
	
 }
 .sticky
 {
	 position: fixed;
	 left: 0;
	 top: 0;
	 width: 100%;
	 z-index: 100;
	 box-shadow:0px 0px 3px 2px #666;
 }
 
 
 ul
 {
	padding: 0;
	margin: 0;
	list-style-type: none;
	font-size: 18px;
	height: px;
	line-height: 50px;
	display: inline-block;
 }
 
 ul a
 {
	 color: #000000;
	 text-decoration: none;
	 display: block;
	 transition-duration: 0.3s
 }
 
 ul > li
 {
	 float: left;
	 width: 150px;
	 height: 50px;
 }
 

 
 ul > li a:hover
 {
	 color: #990099;
	 background-color: ;
 }

Starałem się wytłumaczyć jak najbardziej zrozumiale, z góry dzięki za każdą pomoc ;)

komentarz zamknięcia: Znalezione rozwiązanie
komentarz 4 lipca 2019 przez Job102 Bywalec (2,050 p.)
Hej, podrzuć całego HTML'a.

Używasz do tego menu JS'a?
komentarz 4 lipca 2019 przez FilOON Użytkownik (680 p.)

Oto cały HTML razem ze skryptami.

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	
	<title></title>
	
	<meta name="description" content="Opis w Google" />
	<meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
	
	<link rel="stylesheet" href="style.css" type="text/css"/>
	
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext" rel="stylesheet">
	
	
</head>

<body>
	
	<div id="container">
		<div class="nav">
			<ul>
				<li><a id="link1" href="#">O MNIE</a></li>
				<li><a id="link2" href="#">PORTFOLIO</a></li>
				<li><a id="link3" href="#">CENNIK</a></li>
				<li><a id="link4" href="#">KONTAKT</a></li>
			</ul>
		</div>
	
	<div id="content">
	
		<h1 id="omnie">O mnie</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>

		<p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
		<h1 id="portfolio">Portfolio</h1>
		<p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>

		<p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>

		<p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
		<h1 id="cennik">Cennik</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>

		<p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>

		<p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>

		<p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>

		<p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>
		<h1 id="kontakt">Kontakt</h1>
		<p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>

		<p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>

		<p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>

		<p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
	</div>
	
		
		<div id="footer">
		***** ***** 2019 © Wszelkie prawa zastrzeżone
		</div>
	
	</div>
	
	<script src="jquery-3.4.1.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 src="jquery.scrollTo.min.js"></script>
	
	<script>
		jQuery(function($)
		{
			$.scrollTo(0);
			$('#link1').click(function(){ $.scrollTo ($('#omnie'), 500); });
			$('#link2').click(function(){ $.scrollTo ($('#portfolio'), 500); });
			$('#link3').click(function(){ $.scrollTo ($('#cennik'), 500); });
			$('#link4').click(function(){ $.scrollTo ($('#kontakt'), 500); });
			
		}
		);
		
	</script>
	
</body>
</html>

 

1 odpowiedź

0 głosów
odpowiedź 5 lipca 2019 przez Job102 Bywalec (2,050 p.)
wybrane 5 lipca 2019 przez FilOON
 
Najlepsza

Witam,

Punkt 1) Problem, leży w skrypcie "jquery.scrollTo.min.js" - pozwoliłem sobie go usunąć, a zamiast niego do HTML'a (w sekcji <head>) dodałem ten:

	<script src="jquery-3.4.1.min.js"></script>
	
	<script>
	$(document).ready(function(){
	// Add smooth scrolling to all links
	$("a").on('click', function() {

		// Make sure this.hash has a value before overriding default behavior
		if (this.hash !== "") {
		// Prevent default anchor click behavior
		event.preventDefault();

		// Store hash
		const hash = this.hash;

		// Using jQuery's animate() method to add smooth page scroll
		// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
		$('html, body').animate({
			scrollTop: $(hash).offset().top-75
		}, 800, function(){
   
			// Add hash (#) to URL when done scrolling (default click behavior)
			<!-- window.location.hash = hash; -->
		});
		} // End if
	});
	});
	</script>

"scrollTop: $(hash).offset().top-75" dzięki tej linii możesz regulować, kiedy przewijanie ma się zatryzmać, jeśli chcesz zatrzymać "50px" wyżej wystarczy zmienić na "scrollTop: $(hash).offset().top-50".

Skrypt wymaga również zakotwiczenia:

<div class="nav">
   <ul>
	<li><a id="link1" href="#omnie">O MNIE</a></li>
	<li><a id="link2" href="#portfolio">PORTFOLIO</a></li>
	<li><a id="link3" href="#cennik">CENNIK</a></li>
	<li><a id="link4" href="#kontakt">KONTAKT</a></li>
   </ul>
</div>

Punkt 2) i 3) Podobnie jak wyżej "jquery.scrollTo.min.js" mieszał cos z marginesami.

Uwagi:

Dodałem jeszcze DIV'a #wrapper do Twojego menu, żeby przejście "sticky menu" było bardziej płynne.

         <div id="wrapper">
			<div class="nav">
				<ul>
					<li><a id="link1" href="#omnie">O MNIE</a></li>
					<li><a id="link2" href="#portfolio">PORTFOLIO</a></li>
					<li><a id="link3" href="#cennik">CENNIK</a></li>
					<li><a id="link4" href="#kontakt">KONTAKT</a></li>
				</ul>
			</div>
		</div>

oraz wprowadziłem kilka zmian w klasach .nav i .sticky.

Pozniżej pełny kod HTML (skróciłem trochę Lorem Ipsum, żebym mógł wysłać tego posta) i CSS (porównaj punkty, które wymieniłem ze swoim kodem - napewno zauważysz zmiany):

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     
    <title></title>
     
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />
     
    <link rel="stylesheet" href="style.css" type="text/css"/>
     
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext" rel="stylesheet">

	<!--============================
	Add script for SMOTH LINK SCROLL
	================================!-->	
	<script src="jquery-3.4.1.min.js"></script>
	
	<script>
	$(document).ready(function(){
	// Add smooth scrolling to all links
	$("a").on('click', function() {

		// Make sure this.hash has a value before overriding default behavior
		if (this.hash !== "") {
		// Prevent default anchor click behavior
		event.preventDefault();

		// Store hash
		const hash = this.hash;

		// Using jQuery's animate() method to add smooth page scroll
		// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
		$('html, body').animate({
			scrollTop: $(hash).offset().top-75
		}, 800, function(){
   
			// Add hash (#) to URL when done scrolling (default click behavior)
			<!-- window.location.hash = hash; -->
		});
		} // End if
	});
	});
	</script>
	
</head>
 
<body>
     
    <div id="container">
		<div id="wrapper"> <!--Add DIV #wrapper!-->
			<div class="nav">
				<ul>
					<li><a id="link1" href="#omnie">O MNIE</a></li> <!--Add #omnie!-->
					<li><a id="link2" href="#portfolio">PORTFOLIO</a></li> <!--Add #omnie!-->
					<li><a id="link3" href="#cennik">CENNIK</a></li> <!--Add #cennik!-->
					<li><a id="link4" href="#kontakt">KONTAKT</a></li> <!--Add #kontakt!-->
				</ul>
			</div>
		</div>
    <div id="content">
     
        <h1 id="omnie">O mnie</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
        <h1 id="portfolio">Portfolio</h1>
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="cennik">Cennik</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>
 
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="kontakt">Kontakt</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
 
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
    </div>
     
         
        <div id="footer">
        ***** ***** 2019 © Wszelkie prawa zastrzeżone
        </div>
     
    </div>

    <script>
    $(document).ready(function() {
    const NavY = $('.nav').offset().top;
      
    const stickyNav = function(){
    const ScrollY = $(window).scrollTop();
           
    if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }
    };
      
    stickyNav();
      
    $(window).scroll(function() {
        stickyNav();
    });
    });
    </script>
</body>
</html>
 body
 {
     background-color: #ffffff;
     color: #000000;
     margin: 0 !important;
     font-family: 'Roboto', sans-serif;
 }

 #container
 {
     width: 100%;
     margin-left: auto;
     margin-right: auto;
 }
  
 #content
 {
     width: 1500px;
     margin-left: auto;
     margin-right: auto;
 }
  
 #footer
 {
     width: 100%;
     padding: 10px;
     color: #ffffff;
     background-color: #000000;
     text-align: center;
 }
  
 #wrapper /*New ID*/
 {
 	height:50px;
 }
 
 .nav /*Few changes*/
 {
     width: 100%;
     height: 50px;
     background-color: #ffffff;
     text-align: center;
     font-weight: bold;
	 -o-transition:box-shadow 1s;
	 -moz-transition:box-shadow 1s;
	 -webkit-transition:box-shadow 1s;
     transition:box-shadow 1s;
 }
 .sticky /*Few changes*/
 {
     position: fixed;
     top: 0;
     width: 100%;
     z-index: 100;
     box-shadow:0px 0px 3px 2px #666;
 }
  
 ul
 {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 18px;
    height: px;
    line-height: 50px;
    display: inline-block;
 }
  
 ul a
 {
     color: #000000;
     text-decoration: none;
     display: block;
     transition-duration: 0.3s
 }
  
 ul > li
 {
     float: left;
     width: 150px;
     height: 50px;
 }
 
 ul > li a:hover
 {
     color: #990099;
     background-color: ;
 }

Mam nadzieję, że pomogłem.

Pozdrawiam.

komentarz 5 lipca 2019 przez FilOON Użytkownik (680 p.)
Dziękuję za pomoc, strona działa dokładnie tak jak chciałem.
Nastąpił jednak jeden problem, wykorzystałem kod który dla mnie zmodyfikowałeś i CSS najzwyczajniej nie działa, o co chodzi?
komentarz 6 lipca 2019 przez Job102 Bywalec (2,050 p.)
A co dokładniej nie działa?

Wogóle nie "zaciąga" style.css? Czy tylko, niektórych klas?
1
komentarz 6 lipca 2019 przez FilOON Użytkownik (680 p.)
Tak jakby w ogóle nie czytało CSS'a. Sprawdzałem kombinacją CTRL + U w przeglądarce i plik jest podpięty. Czyściłem dane przeglądarki i nic. Dodam że nie działa na żadnej przeglądarce. Kod jest identyczny jak wyżej.
komentarz 8 lipca 2019 przez Job102 Bywalec (2,050 p.)
Hmm... Prześlij cały kod HTML i CSS.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)

HTML:

<!DOCTYPE HTML>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      
    <title>*** ***</title>
      
    <meta name="description" content="Opis w Google" />
    <meta name="keywords" content="słowa, kluczowe, wypisane, po, porzecinku" />

	<link href="./style.css" rel="stylesheet" type="text/css" />

    <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap&subset=latin-ext" rel="stylesheet">
 
    <!--============================
    Add script for SMOTH LINK SCROLL
    ================================!-->
    <script src="jquery-3.4.1.min.js"></script>
     
    <script>
    $(document).ready(function(){
    // Add smooth scrolling to all links
    $("a").on('click', function() {
 
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
 
        // Store hash
        const hash = this.hash;
 
        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        $('html, body').animate({
            scrollTop: $(hash).offset().top-75
        }, 800, function(){
    
            // Add hash (#) to URL when done scrolling (default click behavior)
            <!-- window.location.hash = hash; -->
        });
        } // End if
    });
    });
    </script>
     
</head>
  
<body>
      
    <div id="container">
        <div id="wrapper"> <!--Add DIV #wrapper!-->
            <div class="nav">
                <ul>
                    <li><a id="link1" href="#omnie">O MNIE</a></li> <!--Add #omnie!-->
                    <li><a id="link2" href="#portfolio">PORTFOLIO</a></li> <!--Add #omnie!-->
                    <li><a id="link3" href="#cennik">CENNIK</a></li> <!--Add #cennik!-->
                    <li><a id="link4" href="#kontakt">KONTAKT</a></li> <!--Add #kontakt!-->
                </ul>
            </div>
        </div>
    <div id="content">
      
        <h1 id="omnie">O mnie</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
        <h1 id="portfolio">Portfolio</h1>
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="cennik">Cennik</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porta luctus ligula. Pellentesque a dignissim leo. Nam sodales sem vel quam vehicula, eget consectetur turpis eleifend. Proin iaculis nibh eu enim facilisis ullamcorper. Nunc rhoncus, elit non viverra egestas, lorem libero tempor arcu, in malesuada leo ligula non neque. Fusce sit amet pulvinar nulla. Nunc scelerisque gravida blandit. Aliquam sit amet nunc accumsan, porta lacus sit amet, cursus metus. Quisque eget lorem lectus. Etiam velit tellus, semper ac tellus nec, iaculis lacinia ligula. Nam sagittis nec quam egestas gravida. Etiam fermentum at neque vitae consequat. Phasellus porttitor in arcu non pretium. In vestibulum ex a tortor varius volutpat. Nullam purus urna, blandit ut dui at, varius aliquam velit.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
        <p>Sed felis lorem, tempor at pulvinar eu, hendrerit ac sem. Nam eleifend dolor et augue sagittis efficitur. Morbi sollicitudin convallis purus, et condimentum nibh dictum id. Suspendisse egestas elit mattis viverra ultrices. Nullam eleifend vehicula arcu, id condimentum dui imperdiet ut. Vivamus magna libero, fringilla hendrerit venenatis at, tempus eu eros. Ut et imperdiet purus. Pellentesque cursus condimentum massa, nec pulvinar ex suscipit a.</p>
        <p>Cras iaculis pharetra justo, sed ornare ex condimentum id. Nam fermentum urna eu congue sollicitudin. Donec euismod interdum pharetra. Cras vel imperdiet tortor. Vivamus sollicitudin volutpat justo, in mollis erat faucibus id. Aenean porta, justo quis bibendum pretium, mauris lorem hendrerit sem, vestibulum fringilla metus urna eget turpis. Morbi eros velit, lacinia nec scelerisque eget, bibendum lobortis neque. Nullam dapibus massa in eros dictum tincidunt.</p>
        <h1 id="kontakt">Kontakt</h1>
        <p>Maecenas bibendum sapien eu sem pulvinar, eu congue enim accumsan. Vestibulum id sollicitudin felis. Phasellus porta quam ut massa congue volutpat. Nam facilisis, est sed pulvinar vestibulum, elit urna venenatis mauris, ut elementum eros libero vitae ipsum. Fusce vitae aliquam ligula. Suspendisse tempus mi quis justo semper, sed interdum libero viverra. Sed sit amet fermentum ex, sit amet ornare lacus. Sed suscipit velit id tortor viverra lacinia. Aliquam sed tincidunt odio. Integer malesuada auctor consequat. Sed non ex lectus. Sed eu tellus convallis, pretium felis venenatis, placerat lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque accumsan mollis ex, a blandit arcu egestas suscipit. Fusce ultrices luctus dapibus.</p>
  
        <p>Sed sit amet tincidunt metus, sed euismod metus. Morbi vehicula et risus pretium facilisis. In sollicitudin ut enim non scelerisque. Praesent vitae lacus quis eros iaculis molestie iaculis eu metus. Donec posuere nisl vitae nunc mollis volutpat. Maecenas quis sapien a mauris faucibus venenatis. Vivamus at interdum felis. Morbi eu pharetra risus. Quisque aliquet ac augue sed scelerisque. Sed facilisis commodo sagittis. Nam nec imperdiet diam. Pellentesque aliquet felis a ligula interdum euismod. Vestibulum id felis nunc. Nam et pretium est. Pellentesque elementum nisl nulla, vitae dictum purus dapibus nec. Vivamus vulputate sem non convallis imperdiet.</p>
    </div>
      
          
        <div id="footer">
        ********* 2019 © Wszelkie prawa zastrzeżone
        </div>
      
    </div>
 
    <script>
    $(document).ready(function() {
    const NavY = $('.nav').offset().top;
       
    const stickyNav = function(){
    const ScrollY = $(window).scrollTop();
            
    if (ScrollY > NavY) { 
        $('.nav').addClass('sticky');
    } else {
        $('.nav').removeClass('sticky'); 
    }
    };
       
    stickyNav();
       
    $(window).scroll(function() {
        stickyNav();
    });
    });
    </script>
</body>
</html>

CSS:

body
{
    background-color: #999999;
    color: #000000;
    margin: 0 !important;
    font-family: 'Roboto', sans-serif;
}
 
#container
{
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}
  
#content
{
    width: 1500px;
    margin-left: auto;
    margin-right: auto;
}
  
#footer
{
    width: 100%;
    padding: 10px;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
}
  
#wrapper /*New ID*/
{
   height: 50px;
}
 
.nav /*Few changes*/
{
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    text-align: center;
    font-weight: bold;
    -o-transition:box-shadow 1s;
    -moz-transition:box-shadow 1s;
    -webkit-transition:box-shadow 1s;
    transition:box-shadow 1s;
}
.sticky /*Few changes*/
{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    box-shadow:0px 0px 3px 2px #666;
}
  
ul
{
   padding: 0;
   margin: 0;
   list-style-type: none;
   font-size: 18px;
   height: px;
   line-height: 50px;
   display: inline-block;
}
  
ul a
{
    color: #000000;
    text-decoration: none;
    display: block;
    transition-duration: 0.3s;
}
  
ul > li
{
    float: left;
    width: 150px;
    height: 50px;
}
 
ul > li a:hover
{
    color: #990099;
    background-color: ;
}

 

komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Usunąłem zawartość pliku style.css i wkleiłem jakieś randomowe formatowanie sekcji body z internetu, o dziwo zadziałało, więc dokleiłem resztę pliku którą miałem wcześniej i niestety reszta strony się nie zmieniła, widoczne są tylko zmiany które robię w body w css. Nie rozumiem.
komentarz 8 lipca 2019 przez FilOON Użytkownik (680 p.)
Przekopiowałem kod który ostatnio wklejałem w innym wątku na forum z innym problemem, zaczęło działać. Jak? Nie wiem. Temat zamykam.

Podobne pytania

0 głosów
2 odpowiedzi 1,499 wizyt
0 głosów
2 odpowiedzi 3,492 wizyt

92,454 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...