Javascript - разделы перекрываются
Я создаю веб-сайт по параллаксу, но есть проблема. Когда я активирую свой Javascript для прокрутки, мои разделы перекрываются.
<script language="javascript" type="text/javascript" src="../JqueryS/jquery-1.4.3.min.js"></script>
<script language="javascript" type="text/javascript" src="../JqueryS/jquery.scrolling-parallax.js"></script>
$(function(){
$('#home') .scrollingParallax({
staticSpeed:0.5,
staticScrollLimit:false,
})
$('#about') .scrollingParallax({
staticSpeed:0.7,
staticScrollLimit:false,
}) /*ENDE*/
$('#gallery') .scrollingParallax({
staticSpeed:0.8,
staticScrollLimit:false,
}) /*ENDE*/
$('#contact') .scrollingParallax({
staticSpeed:0.9,
staticScrollLimit:false,
}) /*ENDE*/
$('.welcome') .scrollingParallax({
staticSpeed:0.48,
staticScrollLimit:false,
}) /*ENDE*/
});
и это пример того, как мои разделы выглядят в CSS
#home {
position:relative;
height:750px;
width:100%;
margin:auto;
background-image: url(../img/PK%20Rooftops%20Epic%201920.png);
background-size:cover;
overflow:hidden;
}
a:link {
color: #999;
text-decoration: none;
}
a:visited {
color: #999;
text-decoration: none;
}
a:hover {
color: #FC0;
text-decoration: none;
}
a:active {
color: #FC0;
text-decoration: none;
}
Мой HTML - пока ничего особенного:
<header>
<div class="navi">
<div class="textmenue">
<nav >
<a href="#home" >Home</a>
<a href="#about" >About</a>
<a href="#gallery" >Gallery</a>
<a href="#contact" >Contact</a>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="welcome"><img src="img/Willkommen.png"></div>
</section>
<section id="about">
</section>
<section id="gallery">
</section>
Я действительно не знаю, что делать в этом случае. Я искал решения, но ничего не нашел, и надеюсь, вы мне поможете.