Remove class and then add back

Remove class and then add back

I have a header navigation listed below, and the class added to the li
creates an icon.
When scrolling down I want to be able to remove the class completely and
when scrolling back to the top of the page I want to be able to tell which
class belongs to which item and add that same class back.
I am thinking I probably need to store them into variables. Keep in mind
these menu items are dynamic and can change if it's deleted.
HTML
<ul id="menu-left-main-nav" class="main-left-nav nav-bar hide-for-small">
<li id="menu-item-37" class="customicon-shop"><a
href="http://localhost:8888/shop/">Shop</a></li>
<li id="menu-item-35" class="customicon-contact"><a
href="http://localhost:8888/account/">Account</a></li>
<li id="menu-item-36" class="customicon-apps"><a
href="http://localhost:8888/apps-entertainment/">Apps &amp;
Entertainment</a></li>
</ul>
<ul id="menu-right-main-nav" class="main-right-nav nav-bar hide-for-small">
<li id="menu-item-61" class="customicon-about"><a
href="http://localhost:8888/about/">About</a></li>
<li id="menu-item-62" class="customicon-support"><a
href="http://localhost:8888/support/">Support</a></li>
<li id="menu-item-63" class="customicon-why"><a
href="http://localhost:8888/why/">Why?</a></li>
</ul>
jQuery
var nav = $(".nav");
var pos = nav.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
nav.css({
'position': 'fixed'
}).addClass("sticky");
} else {
nav.css({
'position': 'relative'
}).removeClass("sticky");
}
});
If you look at the code, the id's will be dynamic but the classes will not
be.