Witam, mam parę problemów dotyczących JS'a mianowicie:
1.Czy jest opcja żeby t sticky nav zamiast pojawiać się nagle i dziwnie przesuwając strone miał jakiś efekt typu fadein albo coś w ten deseń.
2. Korzystając z odcinka HTML #4 wgrałem skrypt automatycznego przewijana strony, na początku wszystko grało - ale, gdy wgrałem sticky nava i klikałem "home", żeby mnie przeniosło ładnie i płynnie do strony startowej - nie działało - reszta kategorii ładnie płynnie się przesuwa, prócz home, czyli strony startowej.
3. Tworze pierwszą stronę typu one site page i chciałbym wgrać do niej skrypt, który usuwa scrollbara i przy leciutkim ruchu scrolla na myszce 1 strona zanika i płynnym przejściem otwiera sie strona poniżej (tak jak np. na tej stronie : http://bossstaff.no/ )
Załączam HTML i CSS
<!DOCTYPE HTML>
<html lang="pl">
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="keywords" content=""/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="animate.css" type="text/css"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script>
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link1').click(function() { $.scrollTo($('#Home'), 800); });
$('#link2').click(function() { $.scrollTo($('#Aboutus'), 500); });
$('#link3').click(function() { $.scrollTo($('#Domestic'), 500); });
$('#link4').click(function() { $.scrollTo($('#Exhibitions'), 500); });
$('#link5').click(function() { $.scrollTo($('#Commercial'), 500); });
$('#link6').click(function() { $.scrollTo($('#Contact'), 500); });
}
);
$(document).ready(function(){
$(".fade").hide(0).delay(500).fadeIn(3000)
$(".fade2").hide(0).delay(700).fadeIn(5000)
})
$(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>
</head>
<body>
<div class="onepage" id="home">
<nav id="nav" >
<ol>
<li><a id="link1" href="#home">Home</a></li>
<li><a id="link2" href="#Aboutus">About Us</a></li>
<li><a id="link3" href="#Domestic">Domestic</a></li>
<li><a id="link4" href="#Exhibitions">Exhibitions</a></li>
<li><a id="link5" href="#Commercial">Commercial</a></li>
<li><a id="link6" href="#Contact">Contact</a></li>
</ol>
</nav>
<section id="first">
<h1 id="kop" class="fade">
Kope<span class="orange">Ltd</span>
</h1>
<h2 id="text" class="fade2">
Experience the <span class="orange">Power </span> of High quality connection<span class="orange">. </span>
</h2>
</section>
</div>
<div class="onepage" id="Aboutus">
<section>
<h1 class="header2">About Us</h1>
<div class="text" class="white">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum</div>
</section>
</div>
<div class="onepage" id="Domestic">
<section>
<h1 class="header2">Domestic</h1>
<div class="text2">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum</div>
</div>
<div class="onepage" id="Exhibitions">
<section>
<h1 class="header2">Exhibitions</h1>
<div class="text">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum</div>
</section>
</div>
<div class="onepage" id="Commercial">
<section>
<h1 class="header2">Commercial</h1>
<div class="text2">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum</div>
</div>
<div class="onepage" id="Contact">
<section>
<h1 class="header2">Contact</h1>
<div class="text">Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.
Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.
Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym.
Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum</div>
</section>
</div>
<footer>
2018
</footer>
</body>
</html>
/*margin left: auto;
margin right:auto; daje tekst na środek*/
body,html
{
margin: 0px !important;
padding:0px !important;
background-color:#000000;
color:white;
height:100%;
width:100%;
}
.onepage
{
color:white;
width:100%;
height:100%;
color:white;
margin:0;
}
#home
{
font-family: 'Montserrat', sans-serif;
width:90vw;
text-align:center;
font-size:72px;
height: :100%;
}
#kop
{
margin-top:18vh;
width:99vw;
margin-left:auto;
margin-right:auto;
font-size:144px;
text-shadow: 5px 5px #1a1a1a;
}
#text
{
width:65vw;
margin-left:17vw;
margin-right:17vw;
text-shadow: 3px 3px #1a1a1a;
font-family: 'Montserrat', sans-serif;
font-weight:400;
font-size:50px;
}
.orange
{
color:#ff471a;
}
nav
{
width:99vw;
height:10vh;
background-color:black;
}
ol{
margin-right:12vw;
margin-left:12vw;
list-style-type:none;
font-size:1.2vw;
height:8vh;
line-height:200%;
display:inline-block;
}
ol a
{
color: #ffffff;
text-decoration:none;
display:block;
}
ol > li
{
float: left;
width:10vw;
}
ol > li:hover > a
{
color:#ff471a
}
.header2
{
font-family: 'Montserrat', sans-serif;
font-size:72px;
width:90vw;
margin:0;
padding:15px;
}
#Aboutus
{
background-color: #ff471a;
}
#Contact
{
background-color: #ff471a;
}
#Exhibitions
{
background-color: #ff471a;
}
.text
{
color:black;
width:50%;
height:50vh;
text-align: justify;
margin-left:30vw;
margin-top:15vh;
font-family: 'Poiret One', cursive;
font-size:2vw;
font-weight: bold;
}
.text2
{
color:white;
width:50%;
height:50vh;
text-align: justify;
margin-left:30vw;
margin-top:15vh;
font-family: 'Poiret One', cursive;
font-size:2vw;
font-weight: bold;
}
footer
{
height:15vh;
width:99vw;
background-color: black;
color:white;
font-family: 'Montserrat', sans-serif;
font-size:20px;
text-align:center;
}
.sticky
{
position:fixed;
z-index: 100;
top:0;
left:0;
width:100%;
}
Z góry dziękuje za pomoc :)
