Question

我发现lots的things使用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;
}

Answer 1

答案是否 ..你不能

原因：

CSS不是JavaScript
CSS无法计算也无法检测到用户已滚动传递某个元素

这就是为什么人们使用JavaScript，以便可以计算客户端视口大小，元素大小等必要信息，并将所需结果抛给用户

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

1 个答案: