2

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;
}
4

1 に答える 1

1

答えはノーです..あなたはできません

理由：

  • CSSはJavaScriptではありません
  • CSSは計算できず、ユーザーがスクロールして特定の要素を通過したことを検出できません

そのため、人々はJavaScriptを使用して、クライアントのビューポートサイズ、要素サイズなどの必要な情報を計算し、目的の結果をユーザーにスローします。

于 2012-12-19T05:37:17.540 に答える