Search code examples
javascriptjqueryhtmlcsssticky

Reverse scroll & sticky elements

I wanna make a reverse scroll page with every element that stick in the bottom when it touch it (all is in the title).
I tried to catch pieces of code and assemble them but it doesn't work very well, see what I got :

https://jsfiddle.net/9htpf6wv/9/

   //    REVERSE_SCROLL
   
   var winHeight = $(window).innerHeight();
   $(document).ready(function () {
      $(".project").height(winHeight);
      $("body").height(winHeight*$(".project").length);
   });

   window.addEventListener('resize', function (event) {
      $(".project").height($(window).innerHeight());
   });
   $(window).on('scroll',function(){
      $("#projects").css('bottom',$(window).scrollTop()*-1);
   });

   //    STICKY_IMG

//   var scrollBottom = $(window).scrollTop() + $(window).height();
//   
//   var boxInitialBottom = $('.project_img').offset().top;
//   
//   $(window).scroll(function() {
//      if (scrollBottom > boxInitialBottom ) {
//         $('.project_img').css({
//            position: 'fixed',
//            bottom: '0px'
//         });
//      } else {
//         $('.project_img').css({
//            position: 'static',
//            bottom: '0px'
//         });
//      }
//   });
html, body{
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#projects {
   position: fixed;
   bottom: 0;
   left:0;
   width: 100%;
}
.project{
   width: 100%;
}
.project_img{
   height: 100%;
}

.pi1{
   z-index: 30;
}
.pi2{
   z-index: 20;
}
.pi3{
   z-index: 10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div id="projects">
    <div class="project">
      <img class="project_img pi1"
       src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" />
    </div>
    <div class="project">
      <img class="project_img pi2"
       src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg" />
    </div>
    <div class="project">
      <img class="project_img pi3"
       src="https://etudiants.site/l3/4/wp-content/gallery-bank/gallery-uploads/o_1b7nhpsi7143e8h11ksfohhcfla.jpg" />
    </div>
  </div>

</body>

Solution

  • I guess css can do it itself, if i understood the question.

    html,
body {
  height: 100%;
  overflow: hidden;/* send scrollbar to body */
}

body,
.project {
  transform: scaley(-1);/* mirror upward */
  overflow: auto;
}

#projects {
  display: flex;
  flex-flow: column-reverse;/* reverse flow unless you want bottom at top, then remove the flex properties */
}

img {
  width: 100%;/* demo purpose */
}

/* sticky ? */
.project {
position:sticky;/* there is javascript polyfills avalaible, search and pick one up  */
bottom:0;
}
    <div id="projects">
  <div class="project">TOP ?
    <img class="project_img pi1" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" />
  </div>
  <div class="project">MIDDLE
    <img class="project_img pi2" src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg" />
  </div>
  <div class="project">BOTTOM ?
    <img class="project_img pi3" src="https://etudiants.site/l3/4/wp-content/gallery-bank/gallery-uploads/o_1b7nhpsi7143e8h11ksfohhcfla.jpg" />
  </div>
</div>

    img {
  max-width: 100vw;
  max-height: 100vh;
  display: block;
  margin: auto;
}

.project {
  position: sticky;
  top: 0;
  transform: scaley(-1);/* reverse mirror */
  background: rgba(255, 25, 255, 0.75)
}

body {
  height: 100vh;
  transform: scaley(-1);/* mirror */
  overflow: auto;/* get the scrollbar from body */
}

html {
  overflow: hidden;/* to send the scrollbar to body */
}
    <div id="projects">
  <div class="project">
    <img class="project_img pi1" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi2" src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi3" src="https://etudiants.site/l3/4/wp-content/gallery-bank/gallery-uploads/o_1b7nhpsi7143e8h11ksfohhcfla.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi1" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi2" src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi3" src="https://etudiants.site/l3/4/wp-content/gallery-bank/gallery-uploads/o_1b7nhpsi7143e8h11ksfohhcfla.jpg" />
  </div>

  <div class="project">
    <img class="project_img pi1" src="http://www.rd.com/wp-content/uploads/sites/2/2016/04/01-cat-wants-to-tell-you-laptop.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi2" src="http://www.rd.com/wp-content/uploads/sites/2/2016/02/06-train-cat-shake-hands.jpg" />
  </div>
  <div class="project">
    <img class="project_img pi3" src="https://etudiants.site/l3/4/wp-content/gallery-bank/gallery-uploads/o_1b7nhpsi7143e8h11ksfohhcfla.jpg" />
  </div>
  </div