Foundation top bar, change name when top bar gets sticky

I'm using Zurb's foundation with a sticky top bar. I want to change the name into an image when the top bar get's sticky. I think I have to catch the sticky class by using JavaScript.

Code:

<div class="row">
          <div class="large-12 hide-for-small">

            <div id="featured" data-orbit>
                <img src="http://ift.tt/1EGWZur Image 1" alt="slide image">
                <img src="http://ift.tt/1EGWZur Image 2" alt="slide image">
                <img src="http://ift.tt/1EGWZur 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="#">
              Top Bar Title
            </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></li>
                  <li><a href="#">Subdropdown Option</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><label>Section Name</label></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all →</a></li>
            </ul>
          </li>
          <li class="divider"></li>
          <li><a href="#">Main Item 2</a></li>
          <li class="divider"></li>
          <li class="has-dropdown">
            <a href="#">Main Item 3</a>
            <ul class="dropdown">
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li><a href="#">Dropdown Option</a></li>
              <li class="divider"></li>
              <li><a href="#">See all →</a></li>
            </ul>
          </li>
        </ul>
      </section>
    </nav>
                </div>


    <div class="row">
      <div class="large-12 columns">



        <div class="row">
          <div class="large-12 hide-for-small">

            <div id="featured" data-orbit>
                <img src="http://ift.tt/1EGWZur Image 1" alt="slide image">
                <img src="http://ift.tt/1EGWZur Image 2" alt="slide image">
                <img src="http://ift.tt/1EGWZur Image 3" alt="slide image">
              </div>

        </div>
      </div>





        <div class="row">
          <div class="large-12 columns show-for-small">

            <img src="http://ift.tt/1t7KJMH Header">

          </div>
        </div><br>




        <div class="row">
          <div class="large-12 columns">
            <div class="row">

              <div class="large-4 small-6 columns">

                <h4>Upcoming Shows</h4><hr>

                <div class="row">
                  <div class="large-1 column">
                    <img src="http://ift.tt/1wvBrhh]">
                  </div>

                  <div class="large-9 columns">
                    <h5><a href="#">Venue Name</a></h5>
                    <h6 class="subheader show-for-small">Doors at 00:00pm</h6>
                  </div>
                </div><hr>

                <div class="hide-for-small">
                  <div class="row">
                    <div class="large-1 column">
                      <img src="http://ift.tt/1wvBrhh]">
                    </div>

                    <div class="large-9 columns">
                      <h5 class="subheader"><a href="#">Venue Name</a></h5>
                    </div>
                  </div><hr>

                  <div class="row">
                    <div class="large-1 column">
                      <img src="http://ift.tt/1wvBrhh]">
                    </div>

                    <div class="large-9 columns">
                      <h5 class="subheader"><a href="#">Venue Name</a></h5>
                    </div>
                  </div><hr>

                  <div class="row">
                    <div class="large-1 column">
                      <img src="http://ift.tt/1wvBrhh]">
                    </div>

                    <div class="large-9 columns">
                      <h5 class="subheader"><a href="#">Venue Name</a></h5>
                    </div>
                  </div>
                </div>
              </div>





              <div class="large-4 small-6 columns">
                <img src="http://ift.tt/1uYPJ4k">
              </div>






              <div class="large-4 small-12 columns">

                <h4>Blog</h4><hr>
                <div class="panel">
                  <h5><a href="#">Post Title 1</a></h5>

                  <h6 class="subheader">
                    Risus ligula, aliquam nec fermentum vitae, sollicitudin eget urna. Suspendisse ultrices ornare tempor...
                  </h6>

                  <h6><a href="#">Read More »</a></h6>
                </div>

                <div class="panel hide-for-small">
                  <h5><a href="#">Post Title 2 »</a></h5>
                </div>

                <div class="panel hide-for-small">
                  <h5><a href="#">Post Title 3 »</a></h5>
                </div>

                <a href="#" class="right">Go To Blog »</a>

              </div>



            </div>
          </div>
        </div>






        <footer class="row">
          <div class="large-12 columns"><hr>
              <div class="row">

                <div class="large-6 columns">
                    <p>© Copyright no one at all. Go to town.</p>
                </div>

                <div class="large-6 small-12 columns">
                    <ul class="inline-list right">
                      <li><a href="#">Link 1</a></li>
                      <li><a href="#">Link 2</a></li>
                      <li><a href="#">Link 3</a></li>
                      <li><a href="#">Link 4</a></li>
                    </ul>
                </div>

              </div>
          </div>
        </footer>



      </div>
    </div>

    <script>
    document.write('<script src=js/vendor/' +
    ('__proto__' in {} ? 'zepto' : 'jquery') +
    '.js><\/script>')
    </script>
    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

See the JSfiddle here: http://ift.tt/1EGX1ST