Add / remove class when scrolling in a 100vh (overflow) div

Question

I'm trying to add / remove a class on a div when people scroll through the div, but the problem is that the div's height is 100vh and overflows with a vertical scroll. My current scroll function only works when you actually scroll down in the page, instead of inside the div.

Is is possible it have a similar scrollfunction that adds / removes when scrolling THROUGH a div instead of the full page?

$(function() {
  var header = $("#scroller-wrapper");
  $(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 50) {
      header.removeClass('scroller').addClass("scroller hidden");
    } else {
      header.removeClass("scroller hidden").addClass('scroller');
    }
  });
});

It looks like you are trying to removeclass "scroller" and right after you add it again along with "hidden" is that correct — Carsten Løvbo Andersen

Akshay Bajpei Akshay Bajpei · Accepted Answer · 2017-02-22T11:09:14

You can try this script.

$(function() {
var header = $("#scroller-wrapper");
$("#div_for-which_you_want_to_capture_scroll").scroll(function() {    
var scroll = $('#div_for-which_you_want_to_capture_scroll').scrollTop();

console.log(scroll);
if (scroll >= 50) {
  header.removeClass('scroller').addClass("scroller hidden");
} else {
  header.removeClass("scroller hidden").addClass('scroller');
}
});
});

Add / remove class when scrolling in a 100vh (overflow) div

1 Answers