jQueryのコードをjavascriptに書き換えたい

Question

jQueryで書かれたコードをプレーンなjavascriptに書き換えたい

javascriptを勉強中で、理想としたい動きをjQueryのコードで発見をしました。
javascriptの知識が浅い中でjQueryのコードを利用することに正直抵抗があったで勉強のためと思い有識者の方々に助けの手を仰ぎたいと思いました。

該当のソースコード

$(function () {
  $('div.line').each(function () {
    var $win = $(window),
        $winH = $win.height(),
        $connect = $(this),
        position = $connect.offset().top,
        current = 0,
        scroll;
    $win.on('load scroll', function () {
      scroll = $win.scrollTop();
      current = (1 - (position - scroll) / $winH) * 2 * 100;
      if (current > 99.9) {
        current = 100;
      }
      if (scroll > position - $winH) {
        $connect.css({width: current + '%'});
      }
    });
  });
});

その他参考になるような情報などあればよろしくお願い申し上げます。

Comments

[kei344]

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips

[yambejp]

htmlを追記するか、codepenなど動作がわかるものを提示ください

Answer 1

その他参考になるような情報などあればよろしくお願い申し上げます。

【脱jQuery！】ネイティブなJavaScript（Vanilla JS）への書き換え方まとめ | WEMO

「jQuery javascript 書き換え」をキーワードに検索すれば情報はいくらでも見つかります。

Answer 2

理想とした動きをするコードを発見したのであればいちいち書き換える必要はないのでは、というのが前提です。

しかしながら、そのコードが何をやっているのか知らなければ書き換えることもできないのでは？
下記のような書き換えリストのようなものは結構出てます。
まずやってみてください。

jQuery→JavaScript書き換え一覧表

※正直、jQueryの利点って「JavaScript自体にすごく明るくなくても簡潔な記述でいい感じに動く」ことだと思うので、私もどちらかと言われれば余程のことがない限りjQueryを選択してます。
※ただ「速度を重視」ならやはりPure JavaScriptになりますね。「JavaScriptに詳しくないから」では選択しません。結局jQueryはJavaScriptで書かれているからです。