Sticky element isn't fully viewable on mobile when scrolling down

Question

I have a navigation element in the middle of a page that needs to be sticky when scrolling past it

On mobile, when scrolling down the page, the navigation is hidden at the top of the screen.

When scrolling up, it comes back into full view at the top of the page.

HTML:

<div class="sticky-top" >
<nav id="pdp-product-nav" class="init-sticky-nav" >
...nav elements...
</nav></div>

CSS:

.sticky-top {
   position: sticky;
   top: 0;
   z-index: 1020;
}
.pdp-product-nav {
   background: #e0eff9;
   display: flex;
   overflow-x: scroll;
   height: 48px;
   margin-bottom: 39px;
   flex-wrap: nowrap;
   overflow-y: hidden;
}

JS:

initStickyNav: function () {
    var $navElement = $('#pdp-product-nav');
    if($navElement.hasClass('init-sticky-nav')) {
        $navElement.closest('.experience-dynamic-productNav').addClass('sticky-top');
    }
}

JS essentially just checks if a boolean attribute is enabled, which will add init-sticky-nav if it is, and then just adds the sticky-top class. This is just there since the ability to enable/disable sticky nav is wanted.

The question is, how do I prevent it from hiding when scrolling down? I can add padding-top to the .sticky-top class and that fixes it when scrolling down, but then there is a large gap when scrolling up.