滚动时导航栏背景变化

问题描述：

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

这就是我所拥有的html页面所带来的js代码。

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

这就是我的导航栏。我真的不希望整个navbar随着scrolldown改变，只是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的选择。谢谢您的帮助！

请张贴所有与您avbar还有滚动类太CSS。 –

你的'内部'元素有两个id的？这不是有效的HTML，一个元素应该只有一个唯一的ID。 – Punit

我真的不明白你在这里问什么，你的代码应该正常工作。用户向下滚动时，应将“.scrolled”类添加到“＃inner”中。 – Punit

答

编辑：发现问题。你正在尝试使用jQuery，但没有将其包含在页面中。把jQuery放在你的网站上。

我不确定你在问什么，因为你发布的jQuery代码工作正常......当用户滚动时，它将类scrolled添加到#inner。

以下是您的代码片段。我添加了到#inner的过渡和背景颜色到#inner.scrolled，并在身上设置了一个高度，以便您可以滚动并查看它的工作情况。

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

body { 
 
    height: 1000px; 
 
} 
 
#inner { 
 
    width: 140px; 
 
    float: right; 
 
    margin-right: 5px; 
 
    text-align: justify; 
 
    position: fixed; 
 
    transition: background-color 1s; 
 
} 
 
#inner.scrolled { 
 
    background-color: rgba(255, 0, 0, 0.6); 
 
} 
 
.navbar a { 
 
    font-size: 14px; 
 
    font-family: SinkinSansLight; 
 
    letter-spacing: 5px; 
 
    line-height: 20px; 
 
    border: none; 
 
    padding: 2px; 
 
    text-decoration: none; 
 
    margin-top: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="navbar"> 
 
    <img src="images/logo.png" class="logo"> 
 
    <div id="inner"> 
 
    <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具有设置为“高度：100％”的身体;“所以，如果仍然正常工作？我不确定发生了什么事。我试图实现这个网站是tresart.net。如果我的代码是准确的，页面是否可以正确地拉动.js文件？ – Victoria

滚动时导航栏背景变化

相关推荐