Why is my code behaving like this?

            <script>
                    var offset = $('#main-nav').offset();
                    $(window).scroll(function(){
                       //$('#mine').text($(document).scrollTop());
                      $('#main-nav').addClass('fixed-nav');
                      if($(document).scrollTop() < 602){
                             $('#main-nav').removeClass('fixed-nav');
                      }
                    });
            </script>

             <!-- NAVIGATION SCROLLER CODE -->

            <div id="nav_container">
                <nav id="main-nav">
                    <div class="wrap">
                        <a href="/"><div id="logo_mark"></div></a>
                        <div id="nav_link"><a href="#navslide">Menu</a></div>
                        <ul id="navslide">
                            <li><a href="about.php">About</a></li>
                            <li><a href="#">blog</a></li> 
                            <li><a href="services.php">Services</a></li>
                            <li><a href="contact.php">Contact</a></li>              
                            <li><a href="faq.php">FAQ</a></li>
                        </ul>
                    </div>
                </nav>
            </div>

            #main-nav {
            background: #eeeeee;
            padding: 0;
            height: 4em;
            z-index: 999;
            width: 100%;
            }

            #nav_link {
            display: none;
            }

            #main-nav ul {
            line-height: 4.7em;
            position: absolute;
            right: 0;
            display: inline-block;
            font-size: 1em;
            letter-spacing: .1em;
            font-weight: 100;
            text-align: left;
            text-transform: uppercase;
            vertical-align: top;
            }

            #main-nav ul a {
            color: #333;
            text-decoration: none;
            margin: 0 1em;
            padding-bottom: 5px;
            }

            #main-nav li {
            line-height: 1em;
            display: inline-block;
            }

            #nav_link a {
            display: block;
            text-indent: -999px;
            }

            .fixed-nav {
              width: 100%;
              position: fixed;
              top: 0;
              left: 0;
            }

            .fixed-nav #logo_mark{
                display: inline-block;
            }

            #logo_mark {
            display: none;
            width: 223px;
            height: 36px;
            background-image: url('images/menu.png');
            background-size: 100%;
            margin-left: 25px;
            margin-top: 15px;
            }