Resetting Boostrap Affix with new offset in responsive website

Resetting Boostrap Affix with new offset in responsive website

I'm working on a website with the following page structure:

I'm using the Affix plugin so that when the user scrolls past the header,
the navigation becomes fixed at the top of the page, like so:

The website is responsive and when it's in the mobile viewport the header
is completely hidden with display: none. The problem is I can't seem to
get Affix to 'reset' with a new offset, which would now be 0 since the
navigation is always at the top of the page in the mobile viewport.
I tried the following:
$(window).resize(function () {
$("nav").affix({
offset: $("nav").position()
});
});
But that doesn't seem to do anything. When I resize down to the mobile
viewport, the navigation doesn't become fixed until I've scrolled down the
page by an amount equal to the size of the header (which is now completely
hidden with display: none).
I also tried disabling the Affix plugin before re-enabling it:
$(window).resize(function () {
$(window).off('.affix');
$("nav").affix({
offset: $("nav").position()
});
});
But when I resize, the Affix plugin is disabled but doesn't seem to get
re-initialised, so even when I resize only a small amount (not all the way
down to mobile viewport, so the header is still visible), the navigation
doesn't become fixed when I scroll past the header.
Any ideas?