Sticky Nav bar within Scrolling Header

HTML

<header>
    <section><h1>Header stuff<br/>Logo, graphics, etc</h1></section>
    <section id='sticky-container'>
    <nav id='primary-nav'>
        <ul>
            <li>This</li>
            <li>Is</li>
            <li>My</li>
            <li>Nav</li>
        </ul>
    </nav>
    <nav id='secondary-nav'>
        <ul>
            <li>Secondary</li>
            <li>Nav</li>
            <li>Items</li>
            <li>Here</li>
        </ul>
    </nav>
    </section>
    <section><h2>More Header stuff</h2></section>
</header>
<div id='content'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis massa adipiscing, pellentesque enim non, luctus diam. Duis porttitor volutpat nunc ac aliquam. Nullam lobortis dignissim tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et luctus ligula. Nunc bibendum, ipsum id dictum condimentum, lectus eros tincidunt odio, et scelerisque sem turpis in orci. Vestibulum consequat consectetur nisl, eu consectetur ipsum dapibus in. In sed erat quam. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis massa adipiscing, pellentesque enim non, luctus diam. Duis porttitor volutpat nunc ac aliquam. Nullam lobortis dignissim tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et luctus ligula. Nunc bibendum, ipsum id dictum condimentum, lectus eros tincidunt odio, et scelerisque sem turpis in orci. Vestibulum consequat consectetur nisl, eu consectetur ipsum dapibus in. In sed erat quam. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis massa adipiscing, pellentesque enim non, luctus diam. Duis porttitor volutpat nunc ac aliquam. Nullam lobortis dignissim tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et luctus ligula. Nunc bibendum, ipsum id dictum condimentum, lectus eros tincidunt odio, et scelerisque sem turpis in orci. Vestibulum consequat consectetur nisl, eu consectetur ipsum dapibus in. In sed...

CSS

.sticky {position: fixed; top:0; width:100%; z-index:100;}


/* Cosmetic items for clarity */
h1, h2 {margin: 0; line-height:2em;}
header {background:pink;}
header section {background:skyblue;}
header section nav {padding:0.5em 0;}
header section nav#primary-nav {background:violet;} 
header section nav#secondary-nav {background:white;}
header section#sticky-container {border:2px solid black;}
header section nav ul {margin:0; padding:0; text-align: center;}
header section nav ul li {margin: 0 0.5em; display:inline; list-style:none;}

JavaScript

stickyHeaderHandler();

// ON WINDOW SCROLL
	$(window).scroll(function(){
		stickyHeaderHandler();
	});

function stickyHeaderHandler() {
    if (!window.homePosition) window.homePosition = $('#sticky-container').offset().top;
	var currentOffsetPosition = $(window).scrollTop();
    
	if (currentOffsetPosition > window.homePosition) {
		$('#sticky-container').addClass('sticky');
	} else {
		$('#sticky-container').removeClass('sticky'); // this didn't work
        // $('#sticky_navigation').removeAttr('sticky'); // this doesn't work either
	}
}