我使用Zurb的粉底棒。当顶栏发粘时，我想将名称更改为图像。我想我必须使用JavaScript来抓住粘性类。
代码：
<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="#">
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://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="row">
<div class="large-12 columns show-for-small">
<img src="http://placehold.it/1200x700&text=Mobile 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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/300x465&text=Image">
</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>
请在此处查看JSfiddle：http://jsfiddle.net/cajbabkc
编辑：
嗨，我已经达成了一个解决方案，但它与wordpress结合使用了革命滑块插件......
$(window).scroll(function() {
if ($(this).scrollTop() > 150){
$('header').addClass("logochange");
}
else{
$('header').removeClass("logochange");
}
});header{
background:url('http://placehold.it/217x171/E80C7A');
background-repeat:no-repeat;
margin-top:-100px;
width:217px;
height:171px;
transition: all 0.4s ease;
}
header.logochange {
background:url('http://placehold.it/353x66/E8AA0C');
background-repeat:no-repeat;
width:353px;
height:66px;
margin-top:0;
}
.top-bar {
height:66px;
}<link href="//cdn.jsdelivr.net/foundation/5.5.1/css/foundation.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/foundation/5.5.1/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/foundation/5.5.1/javascripts/jquery.foundation.orbit.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">
</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></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://placehold.it/1200x500&text=Slide Image 1" alt="slide image">
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns show-for-small">
<img src="http://placehold.it/1200x700&text=Mobile 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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/50x50&text=[img]">
</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://placehold.it/300x465&text=Image">
</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>
这是我的WP-Test-Environment的链接：http://52.11.22.104
有没有人知道它会是什么？ Chrome的错误控制台说： 未捕获的TypeError：undefined不是函数