Задача-при попадании блока card в зону видимости, button текущего блока меняет background

Question

$(window).scroll(function() {
  function is_fully_shown(target) {
    var wt = $(window).scrollTop();
    var wh = $(window).height();
    var eh = $(target).height();
    var et = $(target).offset().top;
    if (et >= wt && et + eh <= wh + wt) {
      return true;
    } else {
      return false;
    }
  }

  if (is_fully_shown($('.card'))) {
    $('button').addClass('active');
  } else {
    $('button').removeClass('active');
  }
})

.card {
  display: flex;
  margin: 0 auto;
  width: 300px;
  height: 200px;
}

.card:nth-child(1) {
  background-color: #808eff;
}

.card:nth-child(2) {
  background-color: #6720ff;
}

.card:nth-child(3) {
  background-color: #ff4042;
}

.card:nth-child(4) {
  background-color: #0fab44;
}

.card:nth-child(5) {
  background-color: #b3ad51;
}

.card:nth-child(6) {
  background-color: #13602d;
}

button {
  margin: auto;
  font-size: 1.3rem;
  padding: 0.5em 2em;
}

button.active {
  background-color: #1800ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>

Answer 1

$(document).ready(function() {
  var windowHeight = $(window).height();
  $(document).on('scroll', function() {
    $('.card').each(function() {
      var self = $(this),
        height = self.offset().top + self.height();
      if ($(document).scrollTop() + windowHeight >= height) {
        $('button').addClass('active')
      }
    });
  });
});

.card {
  display: flex;
  margin: 0 auto;
  width: 300px;
  height: 200px;
}

.card:nth-child(1) {
  background-color: #808eff;
}

.card:nth-child(2) {
  background-color: #6720ff;
}

.card:nth-child(3) {
  background-color: #ff4042;
}

.card:nth-child(4) {
  background-color: #0fab44;
}

.card:nth-child(5) {
  background-color: #b3ad51;
}

.card:nth-child(6) {
  background-color: #13602d;
}

button {
  margin: auto;
  font-size: 1.3rem;
  padding: 0.5em 2em;
}

button.active {
  background-color: #1800ff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>
<div class="card"><button>test</button></div>

Answer 2

var trigger = document.querySelector('.card');
var obstrigger = new IntersectionObserver(function (entr) {
    var e = entr[0];
    if (e.isIntersecting) {
        trigger.classList.add('iseeu');
    }
    else {
        trigger.classList.remove('iseeu');
    }
});
obstrigger.observe(trigger);

.nothere {
  height: 100vw;
}

.card {
  height: 200px;
}
.card a {
  padding: 10px 15px;
  border: 1px solid grey;
  border-radius: 8px;
  text-decoration: none;
  color: black;
  transition: .7s;
}

.card.iseeu a {
  background-color: coral;
  color: white;
}

<div class="nothere"></div>
<div class="card">
    <a href="#">wow</a>
</div>

intersection observer - почитай, очень полезно взамен прослушки на скролл (первая версия уже даже сафари поддерживает(да здравствует js, аминь). В результате без проблем разберешься с зоной видимости, и прилично увеличишь производительность

БЛОГ НА HUSL

Задача-при попадании блока card в зону видимости, button текущего блока меняет background

Ответы (2 шт):