Question

我想从背景透明开始，然后让background-color: rgba(255, 255, 255, 0.6);在观众开始向下滚动时转换为导航。

这就是我所拥有的，因此html页面提取了js代码。

<head>
<script src="nav.js" type="text/javascript"></script>
</head>

这就是我对导航栏的看法。我真的不希望整个navbar改变为滚动，只是inner。 logo图片需要仍然透明。

 <nav class="navbar" >
    <img src="images/logo.png" class="logo">
    <div id="inner" id="top">

    <ul>
      <li><a href="index.html" title="Home">HOME</a></li>
      <li><a href="about.html" title="About">ABOUT</a></li>
      <li><a href="contact.html" title="Contact">CONTACT</a></li>
    </ul>
    </div>
</nav>

这是我的CSS（如果需要更多我可以发布）。

#inner{
width:140px;
float:right;
margin-right:5px;
text-align:justify;
}
.navbar a {
font-size: 14px;
font-family:SinkinSansLight;
letter-spacing:5px;
line-height: 20px;
border:none;
padding: 2px ;
text-decoration: none;
margin-top: 10px;
}

最后，我的js，简单地从SO上的其他主题复制粘贴，并使用我的CSS中的ID进行调整。

function checkScroll(){
var startY = $('#inner').height() * 2; //The point where the navbar changes in px

if($(window).scrollTop() > startY){
    $('#inner').addClass("scrolled");
}else{
    $('#inner').removeClass("scrolled");
}
}

if($('#inner').length > 0){
$(window).on("scroll load resize", function(){
    checkScroll();
});
}

很抱歉有这么多，我只是看到很多人需要的代码多于提供的代码，而且我一直在尝试使用js的几个选项。谢谢你的帮助！

滚动时导航栏背景的更改

0 个答案: