Sticky nav that anchors to the bottom of a sticky header

I am building a site that has a sticky header, followed by a hero image beneath and then the navigation below the image. The nav then becomes sticky when it scrolls to the bottom of the header.

I’ve hacked something together by using some jQuery to get the height of the sticky header and set that height in em to a second sticky. I had issues when resizing the window so I’m destroying and recalculating the height when the window is resized. Its all very hacky and wondered if foundation can do this natively

$(document).foundation();
$(window).on('load', function () {
    window.getEmValueFromElement = function (element, pixelValue) {
        if (element.parentNode) {
            var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize);
            var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize);
            var pixelValueOfOneEm = (elementFontSize / parentFontSize) * elementFontSize;
            return (pixelValue / pixelValueOfOneEm);
        }
        return false;

   
    };

    var element = document.getElementById('site-header');
    var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight);

    var options = { marginTop: computedHeightInEm };
    var sticky = new Foundation.Sticky($('#nav-sticky'), options);

});


$(window).on('resize', function () {


    $('#nav-sticky').foundation('_destroy');
    window.getEmValueFromElement = function (element, pixelValue) {
        if (element.parentNode) {
            var parentFontSize = parseFloat(window.getComputedStyle(element.parentNode).fontSize);
            var elementFontSize = parseFloat(window.getComputedStyle(element).fontSize);
            var pixelValueOfOneEm = (elementFontSize / parentFontSize) * elementFontSize;
            return (pixelValue / pixelValueOfOneEm);
        }
        return false;

   
    };

    var element = document.getElementById('site-header');
    var computedHeightInEm = window.getEmValueFromElement(element, element.offsetHeight);

    var options = { marginTop: computedHeightInEm };
    var sticky = new Foundation.Sticky($('#nav-sticky'), options);
});

We support only static values (numbers) for this, see the options in the docs: https://get.foundation/sites/docs/sticky.html

At least I am not aware of a solution which is already available in Foundation Sites.