CSS - faire glisser vers le haut une div au clic qui n'est pas visible avant cela

Question

J'ai un fiddle d'une page où je voudrais qu'un événement on click anime scrollTop vers la div .panel-two. J'ai essayé quelques plugins jQuery mais rien n'a fonctionné. Le problème que j'ai est que je ne peux pas utiliser scrollTop si la div n'est pas visible et je ne peux pas animer scrollIntoView.

Voici le html:

    ×

      Foundation
      Dot
      ZURB
      Com
      Slash
      Sites

        Lorem ipsum dolor sit amet
        Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
          ligula pharetra.

      Lorem ipsum dolor sit amet
      Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
        ligula pharetra.

Je prévois d'avoir un slider dans la div .panel-one avec des images où un clic sur une image fera alors défiler la div associée vers le haut pour prendre le contrôle de l'écran.

La div .panel-one doit prendre tout l'écran et l'utilisateur ne doit pas pouvoir faire défiler vers le bas. Seulement une fois que la div .panel-two s'est déplacée vers le haut sur un clic sur une image, l'utilisateur devrait alors pouvoir faire défiler vers le haut pour révéler de nouveau la div .panel-one. La .panel-two devrait ensuite disparaître en dessous de l'écran.

Answer 1

Peut-être que la réponse est un peu tardive, mais je suppose que cela vous aidera à avoir le curseur d'image placé dans paneau-un:

1. Tout d'abord, je cache la barre de défilement :

   $('body').css('overflow', 'hidden');

2. Sur le clic de paneau-un, vous pouvez effectuer une animation vers paneau-deux:

   $(".panel-one").on('click', function() {
     $('html, body').animate({
       scrollTop: $('.panel-two').offset().top
     }, 1000, function() {
       $('body').css('overflow', 'auto');
    });
   });

   n'oubliez pas de réactiver overflow à la fin de l'animation.

3. Ajoutez maintenant un écouteur d'événements scroll pour masquer la barre de défilement une fois que l'utilisateur fait défiler jusqu'au sommet de paneau-un:

   $(document).scroll(function() {
     if ($(window).scrollTop() == 0)
       $('body').css('overflow', 'hidden');
   });

Voir la démo ci-dessous :

$(".close-button").on('click', function() {
  if ($("#offCanvas").css('margin-left') < '0') {
    $("#offCanvas").css('margin-left', '0');
    $(".panel").css('margin-left', '50%');
    $("#bg").css('margin-left', '50%');
  } else {
    $("#offCanvas").css('margin-left', '-50%');
    $(".panel").css('margin-left', '0');
    $("#bg").css('margin-left', '0');
  }
});

$('body').css('overflow', 'hidden');

$(".panel-one").on('click', function() {
  $('html, body').animate({
    scrollTop: $('.panel-two').offset().top
  }, 1000, function() {
    $('body').css('overflow', 'auto');
  });
});

$(document).scroll(function() {
  if ($(window).scrollTop() == 0)
    $('body').css('overflow', 'hidden');
});

#offCanvas {
  position: fixed;
  z-index: 999;
  background-color: black;
  width: 50%;
  margin-left: -50%;
  height: 100%;
}
.close-button {
  position: fixed;
  z-index: 1000;
}
#bg {
  background-image: url('https://unsplash.it/500?random');
  background-size: cover;
  z-index: -1;
  animation: zoom 10s;
  height: 100%;
  width: 100vw;
  position: fixed;
  -webkit-animation-fill-mode: forwards;
  background-attachment: fixed;
}
@keyframes zoom {
  0% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1.1, 1.1);
  }
}
html,
body {
  margin: 0;
  height: 100%;
}
.panel {
  position: relative;
  min-height: 100vh;
  width: 100%;
  z-index: 5;
}
.panel-fixed {
  z-index: 1;
}
.panel-inner {
  padding: 1em;
  width: 100%;
}
.panel-fixed .panel-inner {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
/* Base */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.panel-two {
  background-color: blue;
}
.content {
  position: fixed;
}
body {
  overflow-x: hidden;
}

    ×

      Foundation

      Dot

      ZURB

      Com

      Slash

      Sites

        Lorem ipsum dolor sit amet
        Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
          ligula pharetra.

      Lorem ipsum dolor sit amet
      Donec id ipsum odio. Cras accumsan consectetur nibh, vitae pretium dui hendrerit sed. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac orci elit. Nunc faucibus eros vulputate purus aliquam vel blandit
        ligula pharetra.