javascript - 反向滚动和粘性元素

我想制作一个反向滚动页面，其中每个元素在接触底部时都会粘在底部(所有元素都在标题中)。
我 try catch 代码片段并组装它们，但效果不太好，看看我得到了什么:

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

最佳答案

如果我理解这个问题，我想 css 可以自己完成。

从下面掉下来显示下一个http://codepen.io/gc-nomade/pen/rydGQW

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>

跌倒在上一个 http://codepen.io/gc-nomade/pen/gmeJBB 之上不反转元素的初始流程(删除 flex 和 column-reverse):

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

关于javascript - 反向滚动和粘性元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42937540/

javascript - 反向滚动和粘性元素

上一篇：javascript - 从 Cordova 启动外部浏览器

下一篇：JavaScript 无法在 Cordova 应用程序中工作