Eu tenho o código em baixo e estou a tentar que os elementos li
fiquem com a classe active
dependendo do scroll (efeito parallax), tudo funciona bem (funções click para o scroll) exceto isso. Se souberem de alguma maneira melhor de fazer isto partilhem por favor.
HTML:
<div id="wrapper">
<nav>
<ul>
<li>
section1
</li>
<li>
section2
</li>
<li>
section3
</li>
<li>
section4
</li>
</ul>
</nav>
<div id ="section1">
<p>vccvfcwec</p>
</div>
<div id ="section2">
<p>vccvfcwec</p>
</div>
<div id ="section3">
<p>vccvfcwec</p>
</div>
<div id ="section4">
<p>vccvfcwec</p>
</div>
</div>
jQuery:
$('ul li:eq(0)').click(function() {
$('html, body').animate({
scrollTop: $("#section4").offset().top
}, 1500);
});
$('ul li:eq(1)').click(function() {
$('html, body').stop().animate({
scrollTop: $("#section3").offset().top
}, 1500);
});
$('ul li:eq(2)').click(function() {
$('html, body').stop().animate({
scrollTop: $("#section2").offset().top
}, 1500);
});
$('ul li:eq(3)').click(function() {
$('html, body').stop().animate({
scrollTop: $("#section1").offset().top
}, 1500);
});
var section1Height = $('#section1').height();
var section2Height = $('#section2').height();
var section3Height = $('#section3').height();
var section4Height = $('#section4').height();
$(window).scroll(function() {
var winTop = $(window).scrollTop();
if(winTop > section1Height && winTop <= section2Height){
$('ul li:eq(0)').addClass('active').not().removeClass('active');
}
else if(winTop > section2Height && winTop <= section3Height){
$('ul li:eq(1)').addClass('active').not().removeClass('active');
}
else if(winTop > section3Height && winTop <= section4Height){
$('ul li:eq(2)').addClass('active').not().removeClass('active');
}
else if(winTop > section4Height){
$('ul li:eq(3)').addClass('active').not().removeClass('active');
}
});
CSS:
.active {
color:#fff !important;
}
#wrapper {
width: 100%;
max-width: 1024px;
margin: 0 auto;
}
#section1{
width: 100%;
height: 2000px;
position: relative;
background-color: yellow;
}
#section2 {
width: 100%;
position: relative;
height: 2500px;
background-color:red;
}
#section3{
width: 100%;
position: relative;
height: 1500px;
background-color: green;
}
#section4{
width: 100%;
position: relative;
height: 1500px;
background-color: blue;
}
nav ul {
border: 1px solid;
margin: 0;
background-color: #222;
height: 80px;
margin: 0 0 90px;
width: 100%;
max-width: 1024px;
position: fixed;
z-index: 1;
}
nav ul li {
list-style: none;
margin: 30px 20px 30px 20px;
display: inline;
cursor: pointer;
float: right;
}
nav ul li {
color: #B5B5B5;
text-decoration: none;
}