2

I found lots of things that do this using Javascript, but I was wondering if it was possible to do with just HTML and CSS. Specifically, I want the navbar to appear after one scrolls past the top header.

The following is the HTML code I'm currently using.

<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>

​And here is the CSS code. This part is the top header.

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

And this part is the static navbar 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;
}
Community
  • 1
  • 1
Piccolo
  • 1,612
  • 4
  • 22
  • 38
  • I don't this this is possible without JavaScript. CSS selects and styles the elements on the page. The exception with CSS3 might be [transitions](http://www.w3schools.com/css3/css3_transitions.asp) but I doubt it will solve this problem. What's the aversion to JavaScript? – kravits88 Dec 19 '12 at 05:38
  • 1
    @kravits88 Just my lack of knowledge about it at all. I need to learn, but I'm busy. – Piccolo Dec 19 '12 at 05:43

1 Answers1

1

The answer is no..You cannot

Reason:

  • CSS is not JavaScript
  • CSS cannot calculate nor it can detect that user has scrolled passed a certain element

So that's why people use JavaScript, so that necessary information such as client viewport size, element sizes etc can be calculated and the desired result is thrown to the user

Mr. Alien
  • 153,751
  • 34
  • 298
  • 278