Witam, tak jak w temacie: Podczas scrollowania na dół strony te logo na żółtym tle dziwnie się zachowuje i szczerze nie mam na to pomysłu.
tak wygląda w formie statycznej:
a tak gdy scrolluje:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Weldorado</title>
<meta name="description" content="OPIS FIRMY">
<meta name="keywords" content="SEO- SLOWA">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="jquery.scrollTo.min.js"></script>
<script>
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link1').click(function() { $.scrollTo($('#oferta'), 700); });
$('#link2').click(function() { $.scrollTo($('#onas'), 700); });
$('#link3').click(function() { $.scrollTo($('#projekty'), 700); });
$('#link4').click(function() { $.scrollTo($('#wspolpraca'), 700); });
$('#link5').click(function() { $.scrollTo($('#kontakt'), 700); });
$('.scrollup').click(function() { $.scrollTo($('body'), 1000); });
}
);
//pokaż podczas przewijania
$(window).scroll(function()
{
if($(this).scrollTop()>300) $('.scrollup').fadeIn();
else $('.scrollup').fadeOut();
}
);
</script>
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h2 class="contact">Kontakt: <i class="icon-mobile"></i>61 66 66 666 <i class="icon-mail-alt"></i> weldorado@gmail.com</a> </h2>
<nav id="topnav">
<div class="nav">
<ul class="menu">
<li class="logo">
<img src="img/logo.png" /><span class="napis">WELDORADO</span>
</li>
<li>
<li><a id="link1" href="#" class="tilelink" title="oferta">Oferta<span class="dotd">.</a></span></li>
<li><a id="link2" href="#" class="tilelink" title="onas">O nas<span class="dotd">.</a></span></li>
<li><a id="link3" href="#" class="tilelink" title="projekty">Projekty<span class="dotd">.</a></span></li>
<li><a id="link4" href="#" class="tilelink" title="wspolpraca">Współpraca<span class="dotd">.</a></span></li>
<li><a id="link5" href="#" class="tilelink" title="kontakt">Kontakt<span class="dotd">.</a></span></li>
</li>
</ul>
</div>
</nav>
</header>
<main>
<article>
<section>
<div class="offers" id="oferta">
<header>
<a href="#" class="scrollup"></a>
<h1 class="title">Oferta
<div class="rectangle"></div>
</h1>
</header>
<div class="box">
<div class="photo">
<img src="img/offers1.jpg" />
</div>
<div class="text">
<h3>TYTUŁ</h3>
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez.</p>
</div>
</div>
<div class="box">
<div class="photo">
<img src="img/offers1.jpg" />
</div>
<div class="text" >
<h3>TYTUŁ</h3>
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez.</p>
</div>
</div>
<div class="box">
<div class="photo">
<img src="img/offers1.jpg" />
</div>
<div class="text" >
<h3>TYTUŁ</h3>
<p>Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez.</p>
</div>
</div>
</div>
</section>
<section id="newest">
<div class="about" id="onas">
<header>
<h1 class="title1">O nas
<div class="rectangle1"></div>
</h1>
</header>
<div class="box1">
<div class="text1">
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.<p>
</div>
<div class="photo1">
<img src="img/offers.jpg" />
</div>
</div>
</div>
</section>
<section>
<div class="project" id="projekty">
<header>
<h1 class="title">Projekty
<div class="rectangle2"></div>
</h1>
</header>
<div class="box3">
<div class="photo3">
<div class="overlay">
<a href="#"><img src="img/03.jpg" alt=""></a>
<a class="link" href="#"><p>Projekt 1</p></a>
</div>
</div>
</div>
<div class="box3">
<div class="photo3">
<div class="overlay">
<a href="#"><img src="img/03.jpg" alt=""></a>
<a class="link" href="#"><p>Projekt 2</p></a>
</div>
</div>
</div>
<div class="box3">
<div class="photo3">
<div class="overlay">
<a href="#"><img src="img/03.jpg" alt=""></a>
<a class="link" href="#"><p>Projekt 3</p></a>
</div>
</div>
</div>
<div class="box3">
<div class="photo3">
<div class="overlay">
<a href="#"><img src="img/03.jpg" alt=""></a>
<a class="link" href="#"><p>Projekt 4</p></a>
</div>
</div>
</div>
</div>
</section>
<section id="newest">
<div class="wspolpraca" id="wspolpraca">
<header>
<h1 class="title">Współpraca
<div class="rectangle"></div>
</h1>
</header>
<div class="text4">
<p>I'm a paragraph. Click here to add your own text and edit me. It’s easy. Just click “Edit Text” or double click me to add your own content and make changes to the font. Feel free to drag and drop me anywhere you like on your page. I’m a great place for you to tell a story and let your users know a little more about you.This is a great space to write long text about your company and your services. You can use this space to go into a little more detail about your company. Talk about your team and what services you provide. Tell your visitors the story of how you came up with the idea for your business and what makes you different from your competitors. Make your company stand out and show your visitors who you are.<p>
</div>
</div>
</section>
<section>
<div class="kontakt" id="kontakt">
<header>
<h1 class="title">Kontakt
<div class="rectangle"></div>
</h1>
</header>
<div class="mapa">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2436.1630311309264!2d16.929523715496867!3d52.36746377978558!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47045aed995f10af%3A0xf66396f05a7111e8!2zU3Rhcm_FgsSZY2thIDU3LCBQb3puYcWE!5e0!3m2!1spl!2spl!4v1526914878697" width="1000" height="350" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="box5">
<div class="adres">
<h4>Adres firmy</h4>
<p>Weldorado Michał Piechocki</br>NIP działalności: 7822468158</br>Starołęcka 57d, 61-361 Poznań</br></br><i class="icon-mail-alt">weldorado@gmail.com</i>
</div>
</div>
<div class="box5">
<div class="rectangle5">
</div>
<div class="numer">
<h4>Numer kontaktowy</h4>
<p><i class="icon-mobile"></i>666 666 666</p>
</div>
</div>
</div>
</section>
</article>
</main>
<footer>
<div class="info">
Wszelkie prawa zastrzeżone © 2017 Dziękujemy za wizytę!
</div>
</footer>
<script src="jquery-1.11.3.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>
</body>
</html>
