SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    0 Post(s)
    0 Thread(s)

    floating sticky menu

    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);
    except my menu is in the centre of the page!

    My mark up is as follows;
    <!DOCTYPE html> 
    <html lang="en"> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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>
    <link href="stylesheet2.css" rel="stylesheet" type="text/css">
    <script type="text/javascript">
    <div id="parallax">
      <div id="back"></div>
      <div id="smallballs"></div>
      <div id="bigballs"></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>

    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?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Christchurch, New Zealand
    104 Post(s)
    4 Thread(s)
    There's the sticky-float jQuery plugin that you can use. The demo page shows it with some easing, but that's only because it has a duration. When you specify a duration of 0 there is no easing.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts