Cześć. Mam na stronie wrzucone menu mobilne. Po kliknięciu w hamburgera pokazuję się wcześniej ukryte menu. Tutaj zaczyna się problem. Mam pod menu wielki obrazek na 100vh i na środku niego logo firmy. Dodam, że menu jest sticky. Gdy jestem na samej górze strony i klikam w hamburgera to otwierające się menu przesuwa logo do dołu, ale obrazek zostaje na miejscu w którym być powinien. Gdy zjadę trochę niżej i odpalę menu przy innych częściach strony nic takiego się nie dzieje, wszystko działa jak powinno.Co można zrobić w tej sytuacji? Pozdrawiam
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Moja witryna</title>
<meta name="description" content="Opis zawartości strony dla wyszukiwarek">
<meta name="keywords" content="słowa, kluczowe, opisujące, zawartość">
<meta name="author" content="Jan Programista">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/fontello.css">
<script src="skrypt.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
</head>
<body>
<div id="container">
<nav>
<div id="toggle">
<i class="icon-menu menu"></i>
<li id="mfacebook"><a href="https://www.facebook.com" target="_blank"><i class="icon-facebook-official"></i></a></li>
</div>
<ul>
<li id="home"><a href="#s"><i class="icon-home"></i></a></li>
<li id="oferta"><a href="#s">Oferta</a></li>
<li id="wspolpraca"><a href="#s">Współpraca</a></li>
<li id="facebook"><a href="https://www.facebook.com" target="_blank"><i class="icon-facebook-official"></i></a></li>
</ul>
</nav>
<div id="start">
<div id="logo"><h1>Firma handlowo-usługowa</br>Jan Kowalski</h1></div>
</div>
<div id="about">
<h2 style="text-align:center">asdfasfafdasf:</h2>
- asfdsafsafasf</br>
- adfsafsdadfsf </br>
- safdfasfafdasf</br>
- safdfasfafdasf </br>
- safdfasfafdasf</br>
- safdfasfafdasf</br>
- safdfasfafdasf</br>
<p id="p1"> asfdsafasdfasfsafsafsafasdfdsafasdf</p>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.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="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#toggle').click(function(){
$('ul').toggleClass('active');
})
})
</script>
<script src="jquery.scrollTo.min.js"></script>
<script>
jQuery(function($)
{
$.scrollTo(0);
$('#home').click(function() { $.scrollTo($('#container'), 1000); });
$('#oferta').click(function() { $.scrollTo($('#informacje'), 1000); });
$('#wspolpraca').click(function() { $.scrollTo($('#opis'), 1000); });
}
);
</script>
</html>
body
{
margin: 0;
padding: 0;
font-family: 'Open Sans Condensed', sans-serif;
color: white;
background-color: black;
}
#container
{
width: 100%;
}
/*MENU*/
nav
{
width: 100%;
font-size: 20px;
background-color: black;
}
ul
{
width: 100%;
margin: 0 ;
padding: 0;
}
ul > li
{
list-style: none;
display: inline-block;
padding: 10px;
padding-left: 3%;
}
ul > li :hover
{
opacity: 0.9;
}
ul > li > a
{
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
color: white;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1;
}
#mfacebook
{
display: none;
}
#toggle
{
width: 100%;
padding: 10px;
background-color: black;
text-align: left;
box-sizing: border-box;
display: none;
}
#facebook
{
float: right;
font-size: 35px;
padding: 0;
padding-right: 3%;
}
#home
{
font-size: 35px;
padding: 0;
padding-left: 1%;
}
/*KONIEC MENU*/
#start
{
width: 100%;
height: 95vh;
position: relative;
overflow: hidden;
background-attachment:fixed;
background-image: url("img/start.jpg");
background-size: 100% 100%;
border-bottom: 2px solid black;
opacity: 0.9;
}
#start img
{
width: 100%;
height: 100vh;
}
#logo
{
width: 100%;
text-align: center;
position: absolute;
top: 20vh;
font-size:40px;
color: white;
}
#about
{
height: 75vh;
width: 50%;
text-align: left;
font-size: 20px;
padding-top: 2vh;
margin: auto;
}
#p1
{
text-align: center;
border-bottom: 1px solid white;
width: 50%;
margin: auto;
margin-top: 5%;
}
/*MOBILNA STRONA*/
@media only screen and (max-width: 768px){
/*MENU*/
ul
{
display: none;
}
ul > li
{
display: block;
text-align: left;
float: none;
background-color: black;
width: 100%;
font-size: 20px;
}
nav
{
width: 100%;
font-size: 20px;
background-color: black;
}
#toggle
{
width: 100%;
padding: 10px;
background-color: black;
text-align: left;
box-sizing: border-box;
display: block;
font-size: 40px;
}
#facebook
{
font-size: 35px;
padding: 0;
display: none;
}
#mfacebook
{
display: block;
color: white;
float: right;
}
#mfacebook > a
{
color: black;
text-decoration: none;
font-family: 'Open Sans Condensed', sans-serif;
color: white;
}
#home
{
display: none;
}
.active
{
display: block;
}
.sticky
{
width: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 100;
}
/*KONIEC MENU*/
#start
{
width: 100%;
height: 90vh;
}
#logo
{
position: absolute;
font-size:30px;
}
#about
{
height: 150vh;
width: 50%;
text-align: left;
font-size: 20px;
padding-top: 2vh;
margin: auto;
}
#p1
{
text-align: center;
border-bottom: 1px solid white;
width: 100%;
margin: auto;
margin-top: 10%;
}
}