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;
Code:<!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;
Code:@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?
Reply With Quote
Bookmarks