laravel livewire component: sticky div on top only displayed at a specific scrollY position handling dehydration and page reload

livewire_component_with_a_stick_div_on_top.php

<div>

@if($searchResult->count()>1)
        <div 
            x-data="{ scrollTop: parseInt(localStorage.getItem('scrollTop')) || window.scrollY }" 
            x-init="scrollTop = parseInt(localStorage.getItem('scrollTop')) || window.scrollY"
            class="bg-skin-fill text-big-button px-5 py-5 fixed top-0 flex flex-row justify-between mx-auto"
            x-on:scroll.window="scrollTop = window.scrollY; localStorage.setItem('scrollTop', String(scrollTop))"
            x-bind:class="{'hidden': scrollTop <= 600}" x-cloak
        >
            <div class="flex flex-row justify-center flex-grow">
                <p class="text-big-button px-3 font-bold">Spring zu:</p>
                @foreach($searchResult->keys() as $group)
                    <a class="cursor-pointer text-big-button underline px-3" href="#{{$group}}">{{$group}}</a>
                @endforeach
            </div>
        </div>
        <script>
            window.addEventListener('beforeunload', function() {
                localStorage.removeItem('scrollTop');
            });
        </script>
    @endif
    
    
    <!-- a lot of stuff (the search result) so you have something to scroll down -->
        
</div>