How to react by hover with dynamically added class?

Question

The class sticked is adding when you scroll on top. If you scroll far many small miniatures are appearing to right. So there are two questions:

1. Why not all element react on hover by adding class test?
2. How to add class test on next sticked class?

The link on example.

$(window).scroll(function() {

  $('.text-layer').each(function(i) {

    $window = $(window);
    var increase = i * 50
    var newHeight = $(".text-layer").outerHeight();
    var newWidth = $(".text-layer").outerWidth();
    var distance = $(this).parent().offset().top + newHeight

    if ($window.scrollTop() >= distance) {
      $(this).addClass('sticked').css("transform", "translate(100%," + increase + "px) scale(.8)");
      $(this).parent().css({"height": newHeight, "width": newWidth });
      checkit()
    }

    if ($window.scrollTop() <= distance) {
      $(this).removeClass('sticked').css("transform", "translate(0px, 0px)");
    }
  });

});

function checkit() {
  $('.text-layer.sticked').hover(function() {
      $(this).toggleClass('test')

})
}