当div的底部到达视口底部时删除类 [英] Remove class when bottom of div reaches viewport bottom

问题描述

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

Im trying to create a parallax type effect where the image follows the user until the end of the content. Currently a class is added when the div reaches the top of the viewport however I am not able to reverse the effect when the div content is scrolled passed.

这是一个Codepen示例

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>

CSS

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

JS

$(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错误.总是如此:

There is an error in your JavaScript in the following condition. It is always true:

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

应该是

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

您甚至可以通过使用更有意义的变量名和更简单的条件来阐明JavaScript.例如:

You can even clarify your JavaScript by having more meaningfull variable names and simpler conditions. For example:

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

您可以在此处使用它 http://codepen.io/tzi/pen/xZaxEv

这篇关于当div的底部到达视口底部时删除类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！