Floating menu CSS

[Faun]

How do I make the floating menu like this website:
EON11-S Custom Gaming Laptop Product Features and Details | ORIGIN PC

Currently it's like this on my website:
psygeist

Floating menu should move up once the user scroll past the header.

 

[abhidev]

its easy....

<ul class="nav">
<li><a href="*psygeist.com">Home</a><div class="sub_menu">Sub menu</div></li>
<li class="page_item page-item-2"><a href="*psygeist.com/about-me/">About Me</a><div class="sub_menu">Sub menu</div></li>
</ul>

note the div I have added....and in the css
it would be like this

.nav li{ position:relative;}
.nav li .sub_menu{ display:none; position:absolute; top:/*your main menu height*/px; left:0; }
.nav li:hover .sub_menu{ display:block; }

 

[Faun]

I am not talking about the header but the sidebar on right in my website and the siderbar on left in the origin website.

 

[RCuber]

currently is working similarly in your website!!! did you update it now?

 

[Faun]

currently is working similarly in your website!!! did you update it now?

Yes but it stays a little low from the upper most part. It should stick to the upper most part when the user has scrolled past header of the website.

See the origin website. There, it moves till the upper header is gone from scroll area and then it sticks there just a few pixels below the upper most part of page.
EON11-S Custom Gaming Laptop Product Features and Details | ORIGIN PC

The difference is noticeable.

Ok I just saw that the CSS value changes dynamically from

position:absolute; top:150px;

to

position:fixed; top:15px;

I guess javascript is used to change is dynamically.

It just counts the length scrolled in pixels and then applies second style to the element.

 

[RCuber]

there is a div with a height of 15px .. if I remove that it it works similarly..
*img821.imageshack.us/img821/7528/faun.jpg

Uploaded with ImageShack.us

 

[Faun]

^^not quite what I am looking for

This is the code

<script type="text/javascript">
//<![CDATA[
// mini-cart Floater
window.onscroll = function()
{
if (document.documentElement.scrollTop > 135 || window.pageYOffset > 135) {
if(window.navigator.appVersion.indexOf("IE 6.0")!= -1) {
document.getElementById('floater').style.top = (document.documentElement.scrollTop + 15 ) + "px";
} else{
document.getElementById('floater').style.position = 'fixed';
document.getElementById('floater').style.top = '15px';
}
} else if (document.documentElement.scrollTop < 135 || window.pageYOffset < 135) {
document.getElementById('floater').style.position = 'absolute';
document.getElementById('floater').style.top = '150px';
}
}
//]]>
</script>

DONE !!! Cool effect IMO.

 

[RCuber]

Cool!! Thanks for sharing

EDIT: Where did you find it?

 

[abhidev]

oh.....

 

[Faun]

Cool!! Thanks for sharing

EDIT: Where did you find it?

It was in the website itself.