[jQuery]selectにページ内リンクを仕込む、スクロール位置でselected位置を変える方法

<select id="nav">
    <option value="#ttl01">#ttl01</option>
    <option value="#ttl02">#ttl02</option>
    <option value="#ttl03">#ttl03</option>
    <option value="#ttl04">#ttl04</option>
</select>

<article>
    <h2 id="ttl01">ttl01</h2>
    ⋮
    <h2 id="ttl02">ttl02</h2>
    ⋮
    <h2 id="ttl03">ttl03</h2>
    ⋮
    <h2 id="ttl04">ttl04</h2>
    ⋮
</article>

select{
    position:fixed;
    bottom: 0;
}

$(function(){
    //select用スムーススクロール
    $('select').on('change',function() {
        if($(this).val() != ''){
            let speed = 500;
            let href= $(this).val();
            let target = $(href === "#" || href === "" ? 'html' : href);
            let position = target.offset().top;
            $('body,html').animate({scrollTop:position}, speed, 'swing');
            return false;
        }
    });
    //select切り替え
    $(window).on('load scroll resize',function(){
        $('article').find('h2').each(function(){
            let windowHeight = Number($(window).height());
            let nowPosition = Number($(window).scrollTop());
            let targetPosition = Number($(this).offset().top);
            let targetId = $(this).attr('id');
            if(nowPosition >= Number(targetPosition - windowHeight / 2)){
                $('select option').prop('selected',false);
                $('select option[value="#'+targetId+'"]').prop('selected',true);
            }
        })
    })
})