Javascript 在滚动到时更改元素的背景色

我有一个部分，其中包含一些“卡片”，其中包含可以单击的信息。它们在页面的一半位置，我正在尝试这样做，当你在滚动时接触到它们时，它们会改变颜色。我试图用jquery实现这一点，我有以下几点，但它似乎不起作用：

$(document).ready(function() {
    var eTop = $('.card').offset().top;

    $(window).scroll(function() {
        var position = log(eTop - $(window).scrollTop());
        if (position <= 0) {
            $('.card').css('background-color', 'red');
        }
    });
});

$（文档）.ready（函数（）{
var eTop=$（'.card'）.offset（）.top；
$（窗口）。滚动（函数（）{
var position=log（eTop-$（window.scrollTop（））；
如果（位置请使用

var position = eTop - $(window).scrollTop();

而不是

var position = log(eTop - $(window).scrollTop());

请检查这里的工作片段


$（文档）.ready（函数（）{
var eTop=$（'.card'）.offset（）.top；
$（窗口）。滚动（函数（）{
var position=eTop-$（窗口）.scrollTop（）；
如果（parseInt（position）请使用

var position = eTop - $(window).scrollTop();

而不是

var position = log(eTop - $(window).scrollTop());

请检查这里的工作片段


$（文档）.ready（函数（）{
var eTop=$（'.card'）.offset（）.top；
$（窗口）。滚动（函数（）{
var position=eTop-$（窗口）.scrollTop（）；
if（parseInt（position）在
log（eTop-$（window.scrollTop（））
中
log是什么？在
log（eTop-$（window.scrollTop（））中
log是什么？