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.