当滚动到指定的位置时，启动功能，如何重置它并重新启动，如果我们再次回到这个位置

下面，我给出了一个函数的例子，当我们向下滚动到300 pixels时，该函数会启动动画。

在圆形元素的末端，它们被转换成椭圆形，红色方块出现在右侧。

问题：如果向上滚动到小于300像素的位置，我该如何重置此功能，如果省略到大于300 pixels的位置，该如何重新开始？

i = 0;
function ring() {
  if (i < 1) {
    $('.ring').delay(500).animate({ //1
        left: 287,
      },
      500, 'linear');
    $('.ring').delay(500).animate({ //2
        left: 500,
      },
      500, 'linear');
    $('.ring').delay(500).animate({ //2.1
        left: 594,
      },
      200, 'linear')
  };
  if (i < 1) {
    $('.views-row-1').animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",
      },
      500);
    $('.views-row-1').delay(500).animate({ //9
        width: 115,
        top: 0,
        boxShadow: "0 0 0",
      },
      500);
    $('.views-row-2').delay(1000).animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",
      },
      500);
    $('.views-row-2').delay(500).animate({ //9
        width: 115,
        top: 0,
        boxShadow: "0 0 0",
      },
      500);
    $('.views-row-3').delay(2000).animate({ //9
        width: 140,
        top: -14,
        boxShadow: "0 0 8px",
      },
      500)
  };
  return i++;
}
function scr() {
  var top = $(window).scrollTop();
  if (top > 300) {
    ring();
  };
}
$(window).scroll(scr);

.views-row-1,
.views-row-2,
.views-row-3 {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  background: #ccc;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.views-row-2 {
  left: 100px;
}
.views-row-3 {
  left: 185px;
}
.ring {
  display: block;
  position: absolute;
  top: 20px;
  background: red;
  width: 20px;
  height: 20px;
  z-index: 4;
}
.parent {
  display: block;
  position: fixed;
  width: 100%;
  top: 60px;
}
body {
  height: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Start to scroll down
<div class="parent">
  <div class="ring"></div>
  <div class="views-row-1"></div>
  <div class="views-row-2"></div>
  <div class="views-row-3"></div>
</div>