Change name in topbar to image

HTML

<link rel="stylesheet" href="http://cdn.foundation5.zurb.com/foundation.css">
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>
<div class="row">
    <div class="large-12 hide-for-small">
        <div id="featured" data-orbit>
            <img src="http://placehold.it/1200x500&text=Slide Image 1" alt="slide image">
            <img src="http://placehold.it/1200x500&text=Slide Image 2" alt="slide image">
            <img src="http://placehold.it/1200x500&text=Slide Image 3" alt="slide image">
        </div>
    </div>
</div>
<div class="top-bar-container contain-to-grid sticky">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                 <h1><a href="#">
                  <header>
                  
                
                  </header>
                  </a>
              </h1>

            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a>
            </li>
        </ul>
        <section class="top-bar-section">
            <ul class="right">
                <li class="divider"></li>
                <li class="has-dropdown"> <a href="#">Main Item 1</a>

                    <ul class="dropdown">
                        <li>
                            <label>Section Name</label>
                        </li>
                        <li class="has-dropdown"> <a href="#" class="">Has Dropdown, Level 1</a>

                            <ul class="dropdown">
                                <li><a href="#">Dropdown Options</a>
                                </li>
                                <li><a href="#">Dropdown Options</a>
                                </li>
                                <li><a href="#">Level 2</a>
                                </li>
                                <li><a href="#">Subdropdown Option</a>
                                </li>
                                <li><a href="#">Subdropdown Option</a>
        ...

CSS

header {
    background:url('http://placehold.it/217x171/1E0CE8');
    background-repeat:no-repeat;
    margin-top:-100px;
    width:217px;
    height:171px;
    transition: all 0.4s ease;
}
header.logochange {
    background:url('http://placehold.it/353x66/FF0000');
    background-repeat:no-repeat;
    width:353px;
    height:66px;
    margin-top:0;
}
.top-bar {
    height:66px;
}

JavaScript

$(window).scroll(function () {
     if ($(this).scrollTop() > 300) {
         $('header').addClass("logochange");
     } else {
         $('header').removeClass("logochange");
     }
 });