当您在没有Javascript的情况下滚动到某个点以下时，是否可以显示静态导航栏？答案

【问题标题】：Is it possible to make a static navbar appear when you scroll below a certain point without Javascript?当您在没有Javascript的情况下滚动到某个点以下时，是否可以显示静态导航栏？
【发布时间】：2012-12-06 10:21:03
【问题描述】：

我发现things 中的lots 使用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代码。这部分是顶部标题。

h1 {
font-size:48px;
text-align: center;
color:#00F;
border-style: solid;
border-color: #360;
-moz-border-radius: 30px;
border-radius: 30px;

}

a:link {
color: #00F;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00F;
}
a:hover {
text-decoration: none;
color: #006;
}
a:active {
text-decoration: none;
color: #000;
}
a.border {
border-style: solid;
border-color: #00F;
border-width: 5px;
-moz-border-radius: 15px;
border-radius: 15px;
} 

a.border:hover{
border-color:#006;
}
a.border:active {
border-color: #000;
}

这部分是静态导航栏 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;
}

【问题讨论】：

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

标签： html css

【解决方案1】：

答案是不..你不能

原因：

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

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

【讨论】：