* {
  box-sizing: border-box;
}
body {
  background: #eee;
}

.area {
  width: 300px;
  height: 200px;
  margin: 20px auto;
  background: white;
  position: relative;
}

.inside {
  height: 200px;
  position: relative;
  overflow: auto;
}

.content {
  height: 5000px;
}

.thing {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background: #f06d06;
  color: white;
  padding: 10px;
}

.count {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 1
var inside1 = $(".inside-1");
var thing1 = $(".thing-1");
var count1 = $(".count-1");
inside1.on('scroll', function() {
  thing1.css("top", inside1[0].scrollTop);
  count1.html(parseInt(count1.html())+1);
});

// 2 
var inside2 = $(".inside-2");
var thing2 = $(".thing-2");
var count2 = $(".count-2");
inside2.on('scroll', _.throttle(function() {
  thing2.css("top", inside2[0].scrollTop); 
  count2.html(parseInt(count2.html())+1);
}, 150));

// 3
var inside3 = $(".inside-3");
var thing3 = $(".thing-3");
var count3 = $(".count-3");
inside3.on('scroll', _.debounce(function() {
  thing3.css("top", inside3[0].scrollTop);
  count3.html(parseInt(count3.html())+1);
}, 100));