I am building a website (one page) and when you scroll down, the second page scrolls over the first page. The background-color of the second page is a little bit transparant (0.9) so you can still see the first page.
I want the div with text on the first page and the logo to have an extra class when the second page is scrolled over the first page so I can make the text and logo disappear.
I tried to use jQuery’s inview function, but due to an absolute position, the first page isn’t really out of the viewport.
If someone could help me, thanks!
Advertisement
Answer
I found an onLeave event in the doc that receive a nextIndex value:
$('#fullpage').fullpage({
anchors: ['home', 'work', 'contact'],
onLeave: function(index, nextIndex, direction){
if(nextIndex === 1) {
$('body').removeClass('foo');
} else {
$('body').addClass('foo');
}
}
});
This will add the foo class on page 2, 3, … and remove it on first page.
Advise: instead of:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'work', 'contact'],
});
});
</script>
<script src="js/formvalidation.js"></script>
<script src="http://use.typekit.net/mye6dqa.js"></script>
<script>try{Typekit.load();}catch(e){}</script>
<script>
required.add('Full_Name','NOT_EMPTY','Full Name');
required.add('Email_Address','EMAIL','Email Address');
required.add('Your_Message','NOT_EMPTY','Your Message');
</script>
<script>
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
}
var succesvar = getURLParameter("succesful");
</script>
You can do:
<script src="js/formvalidation.js"></script>
<script src="http://use.typekit.net/mye6dqa.js"></script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'work', 'contact'],
});
});
try{Typekit.load();}catch(e){}
required.add('Full_Name','NOT_EMPTY','Full Name');
required.add('Email_Address','EMAIL','Email Address');
required.add('Your_Message','NOT_EMPTY','Your Message');
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
}
var succesvar = getURLParameter("succesful");
</script>
Or with another file:
<script src="js/formvalidation.js"></script>
<script src="http://use.typekit.net/mye6dqa.js"></script>
<script src="js/main.js"></script>
With js/main.js:
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'work', 'contact'],
});
});
try{Typekit.load();}catch(e){}</script>
required.add('Full_Name','NOT_EMPTY','Full Name');
required.add('Email_Address','EMAIL','Email Address');
required.add('Your_Message','NOT_EMPTY','Your Message');
function getURLParameter(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/+/g, '%20'))||null
}
var succesvar = getURLParameter("succesful");