Jquery - 滚动上的导航栏颜色变化不会逆转

Question

在一个有趣的网站上工作，试图让我的导航栏在用户滚动经过横幅标题后从透明变为彩色。我在 this question 上使用了第二种解决方案.问题是，当我向上滚动时，我的导航栏颜色没有变回。

这是一个精简的 jsfiddle这说明了问题。导致差异的上述解决方案与我的版本之间的主要区别是什么？

这是来自 fiddle 的代码:

html:

<header class="site-header">

 <nav class="site-nav">

  <div class="trigger">
      <a class="page-link" href="#"><span>About Me</span></a>
  </div>
</nav>

<a class="site-title" href="#/">My Site</a>

</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dapibus diam sit amet orci ullamcorper facilisis volutpat sed ante. Suspendisse ut blandit justo. In hac habitasse platea dictumst. Integer volutpat nunc eget fermentum dictum. Phasellus tempus et diam a consequat. Donec vitae enim nunc. Phasellus pretium suscipit turpis, a mollis metus feugiat ac. Vivamus lacus ante, cursus id porttitor et, imperdiet id nibh. Nunc tristique elementum mi a tempus. Ut placerat ac sapien nec rhoncus. Cras interdum orci erat, placerat tincidunt quam finibus a. Suspendisse aliquam non risus congue vulputate. Aenean congue justo sed tincidunt laoreet. Nam augue sapien, commodo vel lacus in, suscipit venenatis eros.
</p>
</article>

CSS:

.site-header{
 height:400px;
}

.site-nav{
 line-height: 56px;
width: 100%;
text-align:right;
position:fixed;

transition-duration: .5s;
}

.site-title {
position:absolute;
top:40%;
left:30%;

font-family: serif;
font-size: 72px;
font-weight: 300;
line-height: 56px;
letter-spacing: -1px;
margin-bottom: 0;
float: left;

color: black;

}

js:

/*Background color change on scroll past title*/
var changePoint = $(".site-title").offset().top;

$(document).scroll(function(){
if($(this).scrollTop() > changePoint){
    $('.site-nav').css({'background-color': '#DDD'});
} else{
    $('.site-nav').css({'background-color': 'transparant'});
}
});

Answer 1

看来您的代码非常完美!一个问题是您的第二个 CSS 声明中有错字。

而不是:$('.site-nav').css({'background-color': 'transparant'});，你应该说:$(' .site-nav').css({'background-color': 'transparent'});

我试过更改你的 fiddle 上的字母，它似乎适用于我的 safari 浏览器。