Header navbar error

Question

I'm coding a responsive navbar, which turns into a burger menu below a certain width, however when I try to open the dropdown menu, it all jumps back up to the top of the page rather than remaining wherever I am within the page. Sorry it's quite hard to describe, but do find all the code below and please let me know if you're able to see what the issue is. Thank you all in advance:

    $('#burger_menu').click(function() {
      $('header ul').css('display', 'block');
      $('header ul').mouseleave(function() {
        $('header ul').css('display', 'none');
      });
    });

    header {
      width: 100%;
      background: #62c2d2;
      position: fixed;
      top: 0;
      z-index: 20;
    }
    
    header #logo {
      width: 300px;
      height: 40px;
      margin: 15px;
      background: url('../img/new-logo.png')center no-repeat;
      background-size: cover;
      float: left;
    }
    
    header nav {
      padding: 10px 15px;
      float: right;
    }
    
    header nav #burger_menu {
      padding-right: 20px;
      font-size: 40px;
      display: none;
      color: #fff;
    }
    
    header nav #burger_menu:visited {
      color: #fff;
    }
    
    header nav #burger_menu:hover {
      color: #eee;
    }
    
    header nav #burger_menu:active {
      color: #fff;
    }
    
    header nav ul {
      display: block;
    }
    
    header nav li {
      padding: 10px;
      display: inline-block;
      float: left;
    }
    
    header nav a {
      width: fit-content;
      font-size: 18px;
      color: #fff;
      text-decoration: none;
      position: relative;
    }
    
    @media screen and (max-width: 1023px) {
      /* NAV */
      header nav #burger_menu {
        display: inline-block;
      }
    
      header nav ul,
      nav:active ul {
        display: none;
        position: absolute;
        padding: 20px 40px;
        background: #62c2d2;
        right: 0;
        top: 80px;
        width: 30%;
      }
    
      header nav li {
        width: 100%;
        text-align: center;
        padding: 15px;
        margin: 0;
      }
    }

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="clearfix">
      <!-- left -->
      <a href="index.html" id="logo"></a>
      <!-- right -->
      <nav>
        <a href="#" id="burger_menu"><i class="fa fa-bars"></i></a>
        <ul>
          <li>
            <a href="index.html" class="active"><span class="active">home</span></a>
          </li>
          <li>
            <a href="about.html"><span>about</span></a>
          </li>
          <li>
            <a href="animation.html"><span>careers</span></a>
          </li>
          <li>
            <a href="brand.html"><span>contact</span></a>
          </li>
        </ul>
      </nav>
    </header>