Hide class when refreshing site and scroll

I’m very new to this and I am trying to add a button to a header when scrolling 355 px.

This is my code:

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$(document).scroll(function() {
    var y = $(this).scrollTop();
    if (y > 355) {
        $('#categorymenu').removeClass('button-hidden');
    } else {
        $('.hfe-flyout-close').click();
        $('#categorymenu').addClass('button-hidden');
    }
});
});});
</script>
<style>
    #categorymenu.button-hidden{
        display: none;
    }
</style>

When I refresh the page, it gets reset. How can I make it not visible on refresh and make it visible as soon as I have scrolled 355 px?

Thanks!

Answer

Check your html code. I think you have missed to add class ‘button-hidden’ on initail render.

your code should be like follows when page render first time

<div id="categorymenu" class="button-hidden">
    <button value="save">save</button>
</div>