Adding and removing class on scroll

Question

I am adding a class to a div after a user scrolls. This works fine, but for some reason it won't remove this class when the user scrolls back again. There are no errors in the console. Where am I going wrong?

var scrolled = $('body').offset().top - 800;
$(window).on('resize scroll', function() {
  if ($(window).scrollTop() > scrolled) {
    $('#one').addClass('in');
  } else {
    $('#one').removeClass('in');
  }
});

section.bg-red {
  background: red;
}

section.bg-blue {
  background: blue;
}

section {
  min-height: 100vh;
}

section p {
  color: red;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

section.in p {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="bg-red" id="one">
  <p>Well done you scrolled</p>
</section>

<section class="bg-blue">
  ddd
</section>

View on Codepen

Well, if scrolled is negative, the if would always be true. An easy way to debug this would be to console log scrolled and see what is going on. — Taplar
– Taplar, Commented Aug 3, 2018 at 17:10
I don't need a codepen for you to be able to add a console log to your own code. What about that suggestion is confusing you? — Taplar
– Taplar, Commented Aug 3, 2018 at 17:13
Not at all. A console.log(variable) is a simple statement you should be aware of which allows you to do basic debugging to solve problems yourself. If you are unaware of this method, I get to tell you about it. If you already know about it, then it should be simple for you to use it to help yourself figure out the issue. People who answer questions on S.O. are not all just about providing answers, but helping you find your own answers in the future. — Taplar
– Taplar, Commented Aug 3, 2018 at 17:24

Unmitigated · Accepted Answer · 2018-08-03 17:27:14Z

The problem is that you are subtracting 800 from the body's offset top, which will produce a negative number. The window's scroll top will never be a negative number, so the class will never be removed.

section.bg-red {
  background: red;
}

section.bg-blue {
  background: blue;
}

section {
  min-height: 100vh;
}

section p {
  color: red;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

section.in p {
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="bg-red" id="one">
  <p>Well done you scrolled</p>
</section>

<section class="bg-blue">
  ddd
</section>
<script>
var scrolled = $('body').offset().top;
$(window).on('resize scroll', function() {
  if ($(window).scrollTop() > scrolled) {
    $('#one').addClass('in');
  } else {
    $('#one').removeClass('in');
  }
});
</script>

Al-76 · Accepted Answer · 2018-08-04 08:47:48Z

0

I found a solution using Waypoints.js which does as required. All that is necessary is to include waypoints.js to the project and write the following Javascript below.

            var $elone = $('.element-one');
            $elone.waypoint(function(direction) {
                if (direction == 'down') {
                    $elone.addClass('in');
                }
                else {
                    $elone.removeClass('in');
                }
            }, {offset: '50%'});

This allows you to use percentages instead of pixels which works better for a responsive website.

answered Aug 4, 2018 at 8:47

Al-76

1,8986 gold badges26 silver badges47 bronze badges

Collectives™ on Stack Overflow

Adding and removing class on scroll

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related