Changing the Color of a Point on a Scatter Plot by Scrolling

Question

I have a scatter plot which uses three different CSV's. The following Javascript controls the placement of points from one of these CSV's:

svg.append('g')
    .selectAll("dot")
    .data(files[2])
    .enter()
    .append("circle")
      .attr("cx", function (d) { return x(d.Index); } )
      .attr("cy", function (d) { return y(d.Value); } )
      .attr("r", 4)
      .style("fill", function (d, i) { 
      if(i === 0) {
        return "#f05050"
      } else {
        return "#d3d3d3"
      }
    
    })

Right now, the points from this CSV are grey except for the point in the 0 index which is red. My scatter plot stays in place when I scroll and there is text to the left of it that scrolls. My question is, how can I change the point in the 0 index to be red after I scroll a certain distance? Thanks in advance.