PCとSP(PC上のブラウザで画面サイズを変えても)でJSの処理を変えたい

現在、PCとSP共通の要素を画面サイズに合わせて
違った動きをするように処理を書いています。

ですが、PC上でブラウザの横幅を変えると、
PC幅（768px以上）に設定した処理（要素をブラウザの高さ中央に設置する）が
SP幅（768px以下）になっても同じ処理がされてしまいます。

PCでブラウザの横幅を動かしたときに、
要素を縦中央に設置する処理がきかないようにしたいです。

よろしくお願いいたします。

JavaScript
1if (window.matchMedia('(min-width: 768px)').matches) {
2        /* ビューポートの幅が 768px以上 */
3
4        // ブラウザの高さに合わせて縦中央表示
5        function heightCheck() {
6            let frameheight = window.innerHeight;
7            let elemheight = document.getElementById('slide-in').clientHeight;
8            let distance = ((frameheight - elemheight) / 2);
9            let icongroup = document.getElementById('slide-in');
10            icongroup.style.top = distance + 'px';
11        }
12        window.addEventListener('scroll', heightCheck)
13
14        function scrollNav() {
15            let rightnav = document.getElementById('slide-in')
16            if (this.scrollY >= 150) rightnav.classList.add('slidein');
17            else rightnav.classList.remove('slidein')
18        }
19        window.addEventListener('scroll', scrollNav)
20
21    } else {
22        /* ビューポートの幅が 768px以下 */
23
24        function scrollNav() {
25            let bottomnav = document.getElementById('slide-in')
26            if (this.scrollY >= 100) bottomnav.classList.add('slideup');
27            else bottomnav.classList.remove('slideup')
28        }
29        window.addEventListener('scroll', scrollNav)
30    }