javascript - Clicking anywhere on the page causes nav with class affix-top to change to class affix

Question

I have a web page I need to style for a client. I cannot change the header they created. My navbar is a div with id="nav" class="affix-top" and is fine until I click anywhere on the page. When I click anywhere the class in my navbar changes to "affix", if I click again it change to "affix-top" and displays again.

see below

//I've added some styles to keep navbar from disappearing when scrolling:
    #nav.affix-top {
        position: relative;
        top: 0px;
    }    
    #nav.affix {
        position: fixed;
        top: 101px;
    }

//It works ok.
//But when I click on the page, or a button or anything the navbar disappears
//behind the header due to the class changing.  I tried this, but it did not
//work.

$(document.body).click( function() {
    $('#nav').removeClass('affix');
    $('#nav').addClass('affix-top');
});

I expect my navbar to remain unchanged when clicking on the page. Thank you.

标签： javascripthtmltwitter-bootstrap