Javascript 使用jQuery在节进入视口时旋转SVG

希望复制类似于此页面上的示例的内容：

我需要一个箭头，它位于页面的底部，直到它到达一个特定的区域（在本例中为蓝色文本区域），然后箭头旋转-90度。如果用户在任意点单击箭头，则滚动至蓝色文本区域，箭头将旋转。我会使用jQuery来更改箭头的类，一旦你点击2000px或者页面下面的任何东西，但是这是一个动态页面，我们不能硬编码这样的东西

非常感谢您的帮助

---

对不起，我误读了你们的原始规格。在将某个元素滚动到视图中时，您可以使用滚动侦听器进行侦听，在本例中为.blue

---

看看小提琴：

你能不能用某种逻辑来说明，如果我们已经滚动了2000px或窗口高度的75%，你的动作是什么？我不知道你想做什么exactly@jas7457不幸的是没有。这需要在移动设备上工作，文本可能会改变，因此它所在的高度也会改变。这就是75%的文档高度将发挥作用的地方。@jas7457不幸的是，箭头将需要精确显示在蓝色底部文本开始的位置-无法真正估计。正在寻找在视图端口中显示蓝色文本区域后旋转箭头的方法。

<div class="container">
  <a href="#jump">
    <svg id="flag" class="flag" xmlns="http://www.w3.org/2000/svg" width="31" height="73">
      <path fill="#04BE5B" fill-rule="evenodd" d="M0 0h31v61.7L16 73c.4 0-16-11.3-16-11.3V0z"/>
    </svg>
  </a>
  <div id="top">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>
  </div>

  <div id="jump" class="blue">
    <svg id="horz-flag" class="hidden" xmlns="http://www.w3.org/2000/svg" width="31" height="73">
      <path fill="#04BE5B" fill-rule="evenodd" d="M0 0h31v61.7L16 73c.4 0-16-11.3-16-11.3V0z"/>
    </svg>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
    </p>
  </div>
</div>

var topofDiv = $( '.blue' ).offset().top; //gets offset of blue text
var $window  = $( window );
var $flag    = $( '.flag' );

$window.scroll( function() {
    if ( $window.scrollTop() + $window.height() > topofDiv ) {
        $flag.addClass( 'red' );
    }
    else {
        $flag.removeClass( 'red' );
    }
} );