Question

在用户滚动浏览横幅标题后，尝试让我的导航栏从透明变为彩色。我在this question上使用了第二个解决方案。问题是，当我向上滚动时，我的导航栏颜色不会改变。

这是一个减少jsfiddle，以证明问题。上面的解决方案与我的版本之间的关键区别是什么导致了差异？

以下是小提琴的代码：

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'});

我尝试更改小提琴上的字母，它似乎适用于我的Safari浏览器。

Answer 2

请参阅此处： jsfiddle

在transparent

上使用transparant，而不是background-color

JQ

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': 'transparent'});
    }
});

Jquery - 滚动条上的Navbar颜色更改不会反转

2 个答案: