Fix On Scroll Using Jquery

I have a fixed header underneath it a hero image that has on top of it an anchor menu, I want that when the anchor menu reaches on scroll the header tag it should become fixed, but when the anchor menu scrolls back to its original page position it should become unfixed. I have the neccesary css to make it work but I can't seem to figure out the jquery code I would need to make this work.
This is the code I had until now but this won't work because my header and anchor menu are responsive and scale according to viewport size so the gap between the anchor menu and header keeps changing.

    $(window).scroll(function () {
      var scroll = $(window).scrollTop();
      if (scroll >= 687) {
        $(".anchor-menu").addClass("anchor-menu-grey");
      } else {
        $(".anchor-menu").removeClass("anchor-menu-grey");
      }
    });

I figured it out in the end, following is the jquery to make it work:

   <script>
    var fixunderHeader = $('.anchor-menu').offset().top; // get initial position of the element

    $(window).scroll(function () { // assign scroll event listener

        var currentScroll = $(window).scrollTop(); // get current position
        var headerHeight = $('header').outerHeight(); // get the height of the header element

        if (currentScroll >= fixunderHeader) {
            $(".anchor-menu").addClass("anchor-menu-grey").css({
                top: headerHeight + 'px' // set the top value to the height of the header
            });

        } else {
            $(".anchor-menu").removeClass("anchor-menu-grey").css({
                top: '' // remove the 'top' property
            });
        }
    });
</script>

Let's break down the code step by step for better understanding:

The first line of code initializes a variable fixunderHeader using jQuery. It retrieves the top offset position of the element with class anchor-menu.

Next, the code sets up a scroll event listener using $(window).scroll(function() { ... }). This means that whenever the user scrolls the window, the code inside the function will be executed.

Inside the scroll event function, the current scroll position is stored in a variable currentScroll using $(window).scrollTop(). This retrieves the distance scrolled from the top of the page.

The height of the header element is then stored in a variable headerHeight using $('header').outerHeight(). This gets the height of the header element.

The code then checks if the current scroll position (currentScroll) is greater than or equal to the initial position of the anchor-menu element (fixunderHeader).

If the condition is true, the code adds the class anchor-menu-grey to the anchor-menu element using .addClass("anchor-menu-grey"). It also sets the top CSS property of the element to the height of the header using .css({ top: headerHeight + 'px' }). This ensures that the anchor-menu element stays below the header.

If the condition is false, meaning the user has scrolled back up to a position above the initial anchor-menu element, the code removes the class anchor-menu-grey from the anchor-menu element using .removeClass("anchor-menu-grey"). It also removes the top CSS property by setting it to an empty string using .css({ top: '' }). This allows the anchor-menu element to return to its original position.

In summary, this code dynamically adds and removes a class to the anchor-menu element based on the scroll position. It also adjusts the positioning of the element to ensure it stays below the header when the user scrolls down.

I built upon this answer: https://stackoverflow.com/a/15850380/20152881