Html 当您在没有Javascript的情况下滚动到某个点下方时，是否可以使静态导航栏出现？

我发现其中很多是使用Javascript实现的，但我想知道是否可以只使用HTML和CSS。具体来说，我希望导航栏在滚动过顶部标题后出现

下面是我当前使用的HTML代码

<h1>

<a class="border" href="http://example.com">home</a> <a class="border" href="forum">forum</a> <a class="border" href="links">links</a> <a class="border" href="contact">contact</a> <a class="border" href="contact/bio">bio</a>

</h1>
<div id="navigation">
<a href="http://example.com">Home</a>
<a href="contact">Contact</a>
<a href="forum">Forum</a>
</div>

这部分是静态导航栏CSS

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
} 

---

答案是否定的。你不能

原因:

• CSS不是JavaScript
• CSS无法计算，也无法检测用户是否滚动通过某个元素

---

这就是人们使用JavaScript的原因，因此可以计算必要的信息，如客户端视口大小、元素大小等，并将所需的结果抛出给用户

我不认为没有JavaScript这是可能的。CSS选择页面上的元素并设置其样式。CSS3的例外可能是，但我怀疑它能否解决这个问题。什么是对JavaScript的厌恶？@kravits88只是我对JavaScript的了解不够。我需要学习，但我很忙。

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
}