Hey guys, I’m creating my first website and I have been playing with a few tutorials and learning some neat tricks but for the sake of simplicity I will get straight to the point.
I am using HTML5 and have started by making a large header which has a parallax effect, that works just fine, underneath that I have a container div for the entire site and inside that for testing purpose I have a logo, centred, bellow that a menu bar, also centred, and the ‘page’ which is basically where the content will go
What I want is for the menu bar to stay in the position i have placed it but upon scrolling down I want to to stick to the top of the browser with no easing effect just simply glued to the top until i scroll back to top, then I want it to get back into its position.
I have tried many, many, many times but I just cant seem to make it work
so if any one can either explain how to do so or direct me to a detailed tutorial
This is the exact effect I want(the ‘help’ button/menu);
http://linowski.ca/experiments/03_sticky_floating_nav/
except my menu is in the centre of the page!
My mark up is as follows;
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<style>
</style>
<link href="stylesheet2.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>
<div id="parallax">
<div id="back"></div>
<div id="smallballs"></div>
<div id="bigballs"></div>
</div>
<div id="main" class="container">
<div id="logo"><img src="logo.png" width="514" height="154" alt="logo"></div>
<nav><img src="menu.png" width="514" height="41" alt="nav"></nav>
<div id="page"><img src="page.png" width="963" height="4572" alt="page"></div>
</div>
</body>
</html>
and the css is;
@charset "UTF-8";
#parallax {
position:relative; overflow:hidden; width:100%; height:632px; background:url(backgroundp.jpg); background-position:center; background-repeat:no-repeat;
}
#back {
position:absolute; width:95%; height:615px; background:url(back.png);
}
#smallballs {
position:absolute; width:98%; height:622px; background:url(smallballs.png)
}
#bigballs {
position:absolute; width:90%; height:605px; background:url(bigballs.png);
}
body { background-color:#f6f6f6;text-align:center;margin:0 auto;
}
#logo {
background-image:url(logo.png); width:514px; height:154; margin: auto;
}
#page {
width: 963; height: 4572; margin: auto;
}
#main {
width: 963px; margin: 0 auto;
}
nav {
width: 514px; height: 41px; margin: auto;
}
so now what?