Meghan Logue Meghan Logue - 1 year ago 62
jQuery Question

Navigation - Fixed

I'm trying to create a site with a slightly complicated navigation. I've gotten the navigation to look like I want to on initial load, but now am trying to get it to sticky nav to the top on scroll. I've been able to get a class to be created when the navigation bar hits the top, but cannot get it to sticky. Every time I add a position it jumps back down. Any advice or help would be great.

Here is the site:

The div that needs fixed on scroll is moduletable_menu which also gets main-nav-scrolled added as a class when it gets to the top of the page.


Declaring the following styles will fix the navigation in question to the top of the menu when the class main-nav-scrolled is added.


.main-nav-scrolled .top-menu li {
    display: inline-block;
    float: none;

.main-nav-scrolled .top-menu {
    position: fixed;
    top: 0;
    bottom: auto;
    z-index: 9;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;