Question

我想制作一个反向滚动页面，当触摸它时所有元素都粘在底部（所有都在标题中）。
我试图捕捉一些代码并组装它们，但它不能很好地工作，看看我得到了什么：

   //    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>

Answer 1

如果我明白这个问题，我猜css可以自己做。

从http://codepen.io/gc-nomade/pen/rydGQW

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

落在上一个http://codepen.io/gc-nomade/pen/gmeJBB 之上，没有倒转元素的初始流量（放弃flex和column-reverse）：

＆＃13;

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 */
}

＆＃13;

<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

＆＃13;

反向滚动＆amp;粘性元素

1 个答案: