在删除JQuery中的类后，为什么我的导航不调整大小？

Question

I have been working on this website since last week. It is a school project, and I can't figure out why part of it isn't working. When I scroll down, click on the menu button, leave the menu down, then scroll back up, the navbar keeps its height even though I take away the class that resized it. I have attempted to use Google Chrome's developer tools to see what is happening. It just shows the height property crossed out. I have no idea why it won't work, and I have looked for any reason in my code. I also tried it in Internet Explorer to see if chrome was just having problems with it for some reason. It did the same thing there causing me to assume the problem is in my code.

Here is a link to the website it is currently published on: http://www.dragonmath.net/rockets/

Html Code: http://www.dragonmath.net/rockets/index.html

Javascript Code: http://www.dragonmath.net/rockets/javascript/main.js

CSS Sheet 1: http://www.dragonmath.net/rockets/styles/main.css

CSS Sheet 2: http://www.dragonmath.net/rockets/styles/function.css

Answer 1

got problem!! After scrolling back to top you didn't change height of nav element;after scroll back make it 40px again it may solve your problem.

if (flag !== 2 && $(window).scrollTop() === 0) {

        //add this line
        $nav.css({height:'40px'});

        $nav.slideUp();
        $nav.removeClass("dropDown");
        $menu.stop(true,false).slideUp(800, function () {
            $heading.css({'margin-left':'40px'})
        });
        $nav.stop(true,false).slideDown();
        flag = 2;
    }