Bonjour, voilà j'essaye de coder le même systeme que : http://codyhouse.co/demo/page-scroll-effects/fixed.html
Et actuellement, je suis bloqué au moment de calculer le transform quand on scroll.
Voici mon code :
$(document).ready(function () {
var windowHeight = $(window).height();
var count = $('.sc-fixed').length;
var iScrollPos = 0;
$(window).scroll(function (e) {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
// BOTTOM
$i = 0;
for($i=1; $i<=count; $i++){
if($('.sc-fixed:nth-child('+$i+')').css('transform') == "matrix(1, 0, 0, 1, 0, 0)"){
$('.sc-fixed:nth-child('+ $i +')').next().css('transform', 'translateY('+$(document).scrollTop()+'vh) scale(1)');
}
else{
}
}
} else {
//Scrolling Up
}
iScrollPos = iCurScrollPos;
});
$('.sc-fixed').each(function () {
$i = 0;
$this = $(this);
Zindex = 50;
$bodScroll = 0;
for($i = 1; $i <= count; $i++){
// On attribue un top à chaque fenêtre
newsMargin = windowHeight;
if($i == 1){
// Si c'est la première, on la laisse en haut
$old = 0;
// transform: translateY(0px) scale(1);
$('.sc-fixed:nth-child('+$i+')').css({
'transform' : 'translateY(0px) scale(1)'
});
}
else if($i == count){
$bodScroll = $bodScroll + $('.sc-fixed:nth-child('+$i+')').height();
Zindex = Zindex + 1;
$old = newsMargin + $old;
$('.sc-fixed:nth-child('+$i+')').css({
'transform' : 'translateY(100vh) scale(1)'
});
}
else{
$old = newsMargin + $old;
Zindex = Zindex + 1;
$bodScroll = $old * 2;
$('.sc-fixed:nth-child('+$i+')').css({
'transform' : 'translateY(100vh) scale(1)'
});
}
//console.log($i);
/*$('.sc-fixed:nth-child('+$i+')').css({
//'top' : $old,
//'z-index' : Zindex
});*/
}
// On donne le scroll au body
$('body').css('height', $bodScroll);
return false;
});
});
Dans le each, on applique les transform et aussi la taille du body car les sectins sont en position fixed et donc le body n'a plus la scrollBar
Ensuite dans la partie scroll, c'est là que je doit pouvoir faire afficher les section quand on scroll vers le bas ou le haut.
Après, je voudrais faire si possible une sorte de petit blocage quand on arrive à transform 0 px, comme ça quand on scroll il y a des sortes de blocages et ça oblige un petit coup de molette un peu plus rapide ^^
Actuellement, je travail avec 3 sections, dont deux de la taille height : 100vh et 1 avec la taille de 155px (considéré comme un footer.)
Merci de votre aide.
Cordialement;
EDIT :
Concernant le each, j'ai tout appliquer directement en css et donc le each est maintenant :
$('.sc-fixed').each(function () {
$i = 0;
$this = $(this);
Zindex = 50;
$bodScroll = 0;
for($i = 1; $i <= count; $i++){
// On attribue un top à chaque fenêtre
newsMargin = windowHeight;
$bodScroll = $bodScroll + $('.sc-fixed:nth-child('+$i+')').height();
}
// On donne le scroll au body
$('body').css('height', $bodScroll);
return false;
});