Javascript 当div底部到达视口底部时删除类

我正在尝试创建一个视差类型的效果，图像跟随用户直到内容结束。当前，当div到达视口顶部时会添加一个类，但是当滚动div内容时，我无法反转效果

HTML

<div class="filler">Scroll down</div>
<div class="sticky-stuff"></div>
<div class="content">
  Bacon ipsum dolor amet shankle pancetta bacon beef ribs shank strip steak beef andouille brisket ground round drumstick frankfurter. Beef rump brisket kevin ground round strip steak picanha pancetta andouille pig. Landjaeger pork meatball, turducken leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andou leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip stea leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs ando leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola.uille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola.k capicola flank andouille. Tongue pastrami prosciutto capicola.ille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. Chuck venison ball tip boudin capicola t-bone ham hock sirloin pork. Meatloaf t-bone pancetta cupim cow shankle drumstick pork chop corned beef strip steak. Pork chop beef tenderloin kielbasa. Beef ribs beef cow ham hock biltong alcatra kevin picanha fatback pig brisket ground round boudin porchetta rump. Ham hock drumstick andouille filet mignon prosciutto porchetta shoulder kielbasa sirloin, shank swine. Cow biltong jowl, short loin turkey frankfurter flank tri-tip pancetta tenderloin. Rump ground round sirloin, fatback drumstick salami prosciutto picanha. Sausage brisket porchetta, ham pancetta turducken pork chop. Short loin porchetta strip steak, frankfurter landjaeger bresaola hamburger sirloin.
</div>
<div class="filler"></div>

JS

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.filler {
  height: 100%;
  background: green;
}

.sticky-stuff {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  background: url(http://i.imgur.com/yT65RYM.jpg) no-repeat center center / cover;
  z-index: -1;
}

.content {
  width: 400px;
  background: white;
  margin: 50px;
}

.sticky {
  position: fixed;
  top: 0;
}

$(function() {

  var size = $(window).height(),
    item = $('.sticky-stuff');

  $(window).scroll(function() {

      var fromtop = $(window).scrollTop();

      if (fromtop > size) item.addClass('sticky');
      else item.removeClass('sticky');

      if (($(".content").offset().top + $(".content").height()) >= $(window).height()) {
        item.removeClass('sticky');
      }

    })
    .resize(function() {
      size = $(window).height();
    });
});

---

在以下情况下，JavaScript中存在错误。这总是正确的：

$(".content").offset().top + $(".content").height()) >= $(window).height()

应该是

$(".content").offset().top + $(".content").height()) < $(window).scrollTop()

$（“.content”）.offset（）.top+$（“.content”）.height（））<$（window.scrollTop（））

您甚至可以通过使用更有意义的完整变量名和更简单的条件来澄清JavaScript。例如：

var triggerTop = $(".container").offset().top;
var triggerBottom = triggerTop + $(".container").height();
var item = $('.sticky-stuff');

$(window).scroll(function() {
    var curentScroll = $(window).scrollTop();
    var isSticky = curentScroll > triggerTop && curentScroll < triggerBottom
    item.toggleClass('sticky', isSticky);
});

var triggerTop=$（“.container”）.offset（）.top；
var triggerBottom=triggerTop+$（“.container”）.height（）；
变量项=$（'.sticky stuff'）；
$（窗口）。滚动（函数（）{
var currentScroll=$（窗口）.scrollTop（）；
变量isSticky=curentScroll>triggerTop&&curentScroll

---

你可以在这里玩它

谢谢，但是我意识到我不应该使用position:fixed，而是transvarom:translateY（）-我如何做到这一点，并在它到达div底部时停止翻译？或者继续使用position:fixed，然后添加边距顶部？我应该警告您，触发类比在每次滚动事件中重新评估转换更便宜；）我认为你应该坚持

位置：fixed

。否则，这里有一个解决方案