Sticky custom nav for SharePoint

Question

I was looking to create something like the sticky top bar that appears when you scroll the page. I tried following the instructions from w3schools and codepen. Also read a post about $(window).scroll(function() not working on SharePoint online so I followed the suggestion to use '#s4-workspace' but I still can't get my custom navigation to stick. The custom master page has a header on top and it didn't look right if I just simply use position:fixed; on the custom nav. Is it possible to adapt a sticky nav on SharePoint Online?

In master HTML page, I inserted the following script before <!-- End Custom Scripts -->

<script type="text/javascript" src="/sites/sitename/SiteAssets/js/stickynav.js">//<![CDATA[//]]></script>

and also inserted <header><h1>TITLE</h1></header> right below <div id="s4-workspace" class="s4-nosetwidth">

stickymenu.js:

$(document).ready(function(){ 
loadStickyMenu();
});

function loadStickyMenu() {
var  mn = $(".main-nav");
mns = "main-nav-scrolled";
hdr = $('header').height();

$('#s4-workspace').scroll(function() {
if( $(this).scrollTop() > hdr ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});

document.getElementById('custTopNavigation').innerHTML = '<nav class="main-nav"><a href="#">Nav Link 1</a><a href="#">Nav Link 2</a><a href="#">Nav Link 3</a><a href="#">Nav Link 4</a></nav>'; }

only the header stays sticky.

Answer 1

You can back out what you have done so far, and just move the navigation component above the s4-workspace in the HTML in the master page. Anything outside of s4-workspace will naturally be fixed in the web page since SharePoint disables web page scrolling via CSS.

Just beware that you can't easily use this for putting code components after the s4-workspace container. Since SharePoint forces s4-workspace to take up all available viewport space after the ribbon, your component will be pushed out of sight. It can be pulled back up via CSS, but it gets sticky really quickly since the page doesn't scroll. So it all depends on what you are adding.