达到目标后向div添加高度

Question

我想在达到div目标之后而不是在开始滚动窗口时向滚动条添加高度。

请参见example ：（页面中间的滚动条）

这是我的代码：

HTML

<hr class="progress-bar" id="myBar">

JS

$(window).on('load', function () {
    var target9 = $('#service');

    if (target9.length) {
        var offset9 = target9.offset().top;
        $(window).scroll(function () {
            var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            var scroll = (winScroll / height) * 100;
            var scroll9 = $(document).scrollTop() + height;

            if (offset9 < scroll9) {
                document.getElementById("myBar").style.height = "0" + scroll + "%";
            }
        });
    }
});