javascript - jQuery plugin stops working when assigning an id to an element -

I have an issue, I was hoping someone could help me, I currently create a weblist And I'm trying to use a jquery plugin to create a sticky navigation bar (for the first time).

When I provide the ID # to the ANI tag, and CSS accordingly, rules for implementing this specific NAV, the plugin stops working. The problem is that I would like to do some NAV on my page and I will not see any other option.

Any suggestions?

Thank you!

And here is a link to the full code:

HTML:

CSS:

  / * navigation settings * / # key-nav (position: absolute; bottom: 0; width : 100%; height: 70px; background: #fff;}  
  JS:   
  $ (document) .ready (function ( ) {$ (Window) .bind ('scroll', function () {var navHeight = $ (window) .height () - 70; if ($ (window) .scrollTop ()> navHeight) {$ ('# main AddClass ('fixed');} and {$ ('# main-nav'). RemoveClass ('fixed');}});});  
 

In CSS, # main-nav is more accurate .fixed Therefore, it takes precedence.

You can:

1) Change .fixed to # Status < / Code> to defined is set to ! 3) Do not use any ID, but a specific class for your NAV, and make sure that .fixed / Code> is defined after that new class