DesignHub Problem

Sticky nav is coded in body and I want it in nav.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://mdsgn.nl/DesignHub/css/style.css" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
    <title>MDSGN - Every design is different</title>
</head>

<body>

    <header>
        <div class="inner">
            <a href="index.html">
                <div class="logo"></div>
            </a>
            <nav role='navigation'>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Clients</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div id="container">
        <div class="inner">
            <h2 class="slogan">Every design is a<br> piece of creativity.</h2>
        </div>
        <div class="button-inner">
            <div class="head-button">
                <a class="head" href="portfolio.php">See our portfolio</a>
            </div>
            <div class="head-button" style="margin-left:10px;width:125px;">
                <a class="head" href="contact.php">Contact us</a>
            </div>
        </div>
    </div>

    <div id="content">
       <div class="sectie-1">
           <div class="titel">
               <h2>Welcome on our site</h2>
               <div class="inner">
                   DesignHub is a Dutch Company that's focus on all kinda designs.
               </div>
           </div>
       </div> 
    </div>

    <script src="https://mdsgn.nl/DesignHub/js/jquery-3.3.1.min.js"></script>

    <script src="https://mdsgn.nl/DesignHub/js/menu-scroll.js"></script>
</body>

</html>

CSS

/* Fonts Import */
/* Gilroy */				@import url('fonts/fonts.css');
/* Roboto Condensed */ 		@import url('Roboto+Condensed:300,300i,400,400i,700,700i');
/* Montserrat */ 			@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');

/* Fonts family css: 
	font-family: 'Montserrat', sans-serif;
	font-family: 'Roboto Condensed', sans-serif;
/* 




/* Algemene CSS */
 html{
     font-family: 'gilroy-bolduploaded_file', sans-serif;
}
 body {
     margin: 0;
     padding: 0;
     height: 2000px;
	 background: #fbfbfb url(../images/header-grootbeeld.png) no-repeat;
	 background-position: top center;
     font-size: 16px;
}
 *, *:before, *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}
 ::selection {
     background: #000;
     color: #aaf;
}
a{
	text-decoration: none;
	color: white;
	font-size: 12px;
	font-weight: bold;
}




/* Header CSS */
 header {
     position: fixed;
     width: 100%;
     padding-top: 50px;
     background: transparent;
     transition: 0.7s all;
     z-index: 100;
     font-family: 'Montserrat', sans-serif;
}
 body.header-fixed header {
     position: fixed;
     top: 0;
     background-color: white;
     right: 0;
     padding: 10px;
     box-shadow: 0px -14px 29px #00000059;
     width: 100%;
     z-index: 2;
}
 header .inner {
     width: 100%;
     position: relative;
     margin: 0 auto;
}
 .logo {
     float: left;
     background-image: url('../images/logo-wit.png');
     background-size: cover;
     height: 50px;
     width: 210px;
     margin-top: 10px;
     margin-left: 100px;
}
 body.header-fixed .logo {
	 background-image: url('../images/logo-zwart.png');
	 margin-top: 15px;
}




/* Nav CSS */
 nav {
     overflow: hidden;
	 margin-right: 100px;
     padding-bottom: 10px;
     font-size: 12px;
     font-weight: 600;
}
 body.header-fixed nav{
	 padding-top: 10px;
 }
 nav ul {
    ...

JavaScript

$(document).ready(function(){
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if (scrollTop > 49) {
        $('body').addClass('header-fixed');
    } else {
        $('body').removeClass('header-fixed');
    }
    
    var topOffset = $('div#content').offset().top;
    var headerHeight = $('#topnav').height();
    var transitionPoint = topOffset - headerHeight;
    if (scrollTop > transitionPoint) {
        $('#topnav').addClass('div#content');
    } else {
        $('#topnav').removeClass('div#content');
    }
  });
});