Change scroll function depending on active class

have a fixed sidebar and a fixed header with scrollable content in the main section of the page. The header is to be triggered on the scroll to hide the top portion of itself on scroll down and then show itself on scroll up. The sidebar can be triggered to hide and show itself with a button. When this happens the header gains back the full width of the page until the button is pressed to bring back the sidebar. The page loads with the sidebar opened.

So far I've been able to get the sidebar to transition off and back on the page properly. I also have the header working as intended on page load. However the issue I'm having is with the transition, more so recognizing the changed classes when the sidebar closes. I believe my issue is with the scroll javascript not recognizing the sidebar is closed because when scrolling it applies the classes to the header for when the sidebar is open. To test this I added a class called SEEME123 which never shows.

Below is the javascript for scrolling changes.

var exploreOpen = $('#explore').hasClass('open');
var exploreClosed = $('#explore').hasClass('closed');

$(function () {
    var position = $(window).scrollTop();

        if (exploreOpen) {
        $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll > position) {
            $('#wrapper-site-header').removeClass('explore-open--header-full');
            $('#wrapper-site-header').addClass('explore-open--header-reduced');

        } else {
            $('#wrapper-site-header').addClass('explore-open--header-full');
            $('#wrapper-site-header').removeClass('explore-open--header-reduced');
        }

        position = scroll;
        });

    }   if (exploreClosed) {

        $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll > position) {

            $('#wrapper-site-header').removeClass('explore-closed--header-full');
            $('#wrapper-site-header').addClass('explore-closed--header-reduced');
            $('#wrapper-site-header').addClass('SEEME123');
        } else {

            $('#wrapper-site-header').addClass('explore-closed--header-full');
            $('#wrapper-site-header').removeClass('explore-closed--header-reduced');
        }

        position = scroll;
    });

    } else {}
});

The javascript for the sidebar function toggles the open and closed classes on the sidebar, along with removing or adding the appropriate header class.

I don't understand why this isn't working as intended and would like to know how to resolve the issue. I've searched around attempting to understand where I screwed up, or to find an example where the scroll function does X because of Y. I've also attempted the above without variables (ie..

$(function () {
    var position = $(window).scrollTop();

        if (('#explore').hasClass('open')) {

), and as separate functions.

Anyway, here is a jsfiddle in case I missed something. https://jsfiddle.net/at0yxo0m/

Thank you all for your help and advice.

Additional information. I do have an earlier version of this layout where the scroll function only changes the header area that works with closing the sidebar. However the animations were clunky in general, and worse on mobile. Also to get everything to work right I had to wrap elements more than I thought was needed. So it was my goal to streamline as much as I could while getting the desired result.