Tak jak w temacie zrobilem dokladnie to co na filmiku Pana Mirosława ale dalej nie działa ;(. Tutaj macie kod i z góry dziękuje za pomoc ;3. Przewijanie za pomocą biblioteki stickyfill dziala, ale nie dziala scrollup (14linijka)
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Tytuł strony</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic&subset=latin-ext">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script src="stickyfill.js"></script>
<script>
jQuery(function
{
$scrollTo(0);
$('.scrollup').click(function(){ $.scrollTo($('body'), 800); });
}
);
$(window).scroll(function()
{
if ($(this).scrollTop()>300) $('.scrollup').fadeIn();
else $('.scrollup').fadeOut();
}
);
</script>
</head>
<body>
<header class="header">
<div class="container">
<h1>Nazwa strony</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta mollitia voluptatum tempora, praesentium dolores quisquam ut fugiat consequuntur accusamus deleniti! Nesciunt natus nulla error eos velit quibusdam quaerat obcaecati hic.</p>
</div>
<video src="source/video.mp4" class="video" autoplay loop ><img src="source/header.jpg"></video>
<a href="#" class="scrollup"> </a>
</header>
<nav class="nav">
<div class="container">
<ul>
<li><a href="#o-mnie">O mnie</a></li>
<li><a href="#oferta">Oferta</a></li>
<li><a href="#projekty">Projekty</a></li>
<li><a href="#kontakt">Kontakt</a></li>
</ul>
</div>
</nav>
<section class="section" id="o-mnie">
<div class="container">
<h2>O mnie</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda recusandae reiciendis eius odio, voluptatem harum eveniet minus ipsa, nobis quaerat et debitis modi quo. Accusantium, pariatur ut excepturi. Natus, iure.</p>
<p>Optio tempore voluptas repellendus minima fugit quibusdam, rerum neque veritatis aliquid, ipsum modi doloremque aperiam nulla error sit vitae! Quibusdam excepturi repudiandae vitae reprehenderit rem sapiente odit impedit, quod facere!</p>
<p>Consequuntur eligendi repellendus doloribus harum laudantium corrupti, voluptatem porro libero provident possimus, fuga quas nostrum consectetur. Labore, et illum perspiciatis nihil laborum, deleniti, aut totam dolorum fugit iste sit necessitatibus?</p>
<p>Debitis pariatur cumque molestiae. Blanditiis eaque eveniet assumenda eum nemo ratione! Consectetur optio, sunt architecto ducimus velit. Accusamus possimus rerum sit ullam, alias dolores explicabo beatae impedit similique! Dolorum, velit?</p>
</div>
</section>
<section class="section" id="oferta">
<div class="container">
<h2>Oferta</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda recusandae reiciendis eius odio, voluptatem harum eveniet minus ipsa, nobis quaerat et debitis modi quo. Accusantium, pariatur ut excepturi. Natus, iure.</p>
<p>Optio tempore voluptas repellendus minima fugit quibusdam, rerum neque veritatis aliquid, ipsum modi doloremque aperiam nulla error sit vitae! Quibusdam excepturi repudiandae vitae reprehenderit rem sapiente odit impedit, quod facere!</p>
<p>Consequuntur eligendi repellendus doloribus harum laudantium corrupti, voluptatem porro libero provident possimus, fuga quas nostrum consectetur. Labore, et illum perspiciatis nihil laborum, deleniti, aut totam dolorum fugit iste sit necessitatibus?</p>
<p>Debitis pariatur cumque molestiae. Blanditiis eaque eveniet assumenda eum nemo ratione! Consectetur optio, sunt architecto ducimus velit. Accusamus possimus rerum sit ullam, alias dolores explicabo beatae impedit similique! Dolorum, velit?</p>
</div>
</section>
<section class="section" id="projekty">
<div class="container">
<h2>Projekty</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda recusandae reiciendis eius odio, voluptatem harum eveniet minus ipsa, nobis quaerat et debitis modi quo. Accusantium, pariatur ut excepturi. Natus, iure.</p>
<p>Optio tempore voluptas repellendus minima fugit quibusdam, rerum neque veritatis aliquid, ipsum modi doloremque aperiam nulla error sit vitae! Quibusdam excepturi repudiandae vitae reprehenderit rem sapiente odit impedit, quod facere!</p>
<p>Consequuntur eligendi repellendus doloribus harum laudantium corrupti, voluptatem porro libero provident possimus, fuga quas nostrum consectetur. Labore, et illum perspiciatis nihil laborum, deleniti, aut totam dolorum fugit iste sit necessitatibus?</p>
<p>Debitis pariatur cumque molestiae. Blanditiis eaque eveniet assumenda eum nemo ratione! Consectetur optio, sunt architecto ducimus velit. Accusamus possimus rerum sit ullam, alias dolores explicabo beatae impedit similique! Dolorum, velit?</p>
</div>
</section>
<section class="section" id="kontakt">
<div class="container">
<h2>Kontakt</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda recusandae reiciendis eius odio, voluptatem harum eveniet minus ipsa, nobis quaerat et debitis modi quo. Accusantium, pariatur ut excepturi. Natus, iure.</p>
<p>Optio tempore voluptas repellendus minima fugit quibusdam, rerum neque veritatis aliquid, ipsum modi doloremque aperiam nulla error sit vitae! Quibusdam excepturi repudiandae vitae reprehenderit rem sapiente odit impedit, quod facere!</p>
<p>Consequuntur eligendi repellendus doloribus harum laudantium corrupti, voluptatem porro libero provident possimus, fuga quas nostrum consectetur. Labore, et illum perspiciatis nihil laborum, deleniti, aut totam dolorum fugit iste sit necessitatibus?</p>
<p>Debitis pariatur cumque molestiae. Blanditiis eaque eveniet assumenda eum nemo ratione! Consectetur optio, sunt architecto ducimus velit. Accusamus possimus rerum sit ullam, alias dolores explicabo beatae impedit similique! Dolorum, velit?</p>
</div>
</section>
<footer class="footer">
<div class="container">
<p>© Albert221, 2016.</p>
</div>
</footer>
<script>
$('.nav').Stickyfill();
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').stop().animate({
scrollTop: target.offset().top - 70
}, 800);
return false;
}
}
});
});
</script>
</body>
</html>
