Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.3.3/less.min.js"></script>
    <title>floating menu test - test #2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  
    <style type="text/css">
        code{ padding:10px 8px; margin:3px 0; display:block; background-color:#333; color:#eee; }
        body{ margin:0; padding:0; font-size:12px; font-family:arial; }
        .header{ height:200px; background-color:darkred; text-align:center; color:#fff; font-size:3em; }
        .content{ padding:10px; width:900px; margin:0 auto; background-color:#f1f1f1; position:relative; }
            .wrap{ height:1000px; padding:20px; background-color:#ddd; margin-left:250px; color:#333; }
                .wrap h2{ font-size:2em; }
                .wrap ul{ list-style:none; padding:0; }
                    .wrap ul li{ margin-bottom:20px; }
                        .wrap ul li h3{ font-size:1.2em; padding:0; margin:0; }
            #menu{ position:absolute; left:10px; padding:15px; width:210px; height:430px; background:green;color:#fff; }
                #menu ul{ list-style:none; padding:0; }
                #menu h3{ background-color:darkgreen; padding:3px 8px; margin:0; }
                #menu label{ display:block; margin-bottom:10px; }
        .footer{  height:500px; background-color:blue; text-align:center; color:#fff; font-size:3em; }
    </style>
</head>
    <body>
        <div class="header">Header</div>
        <div class="content">
            <div id="menu">
                <h3>Options:</h3>
                <ul>
                    <li><button>linear</button> (default)</li>
                    <li><button>swing</button></li>
                    <li><button>easeInQuad</button></li>
                    <li><button>easeOutQuad</button></li>
                    <li><button>easeInOutQuad</button></li>
                    <li><button>easeOutElastic</button></li>
                    <li><button>easeInOutElastic</button></li>
                    <li><button>easeInBack</button></li>
                    <li><button>easeOutBack</button></li>
                    <li><button>easeInOutBack</button></li>
                </ul>
                <label>
                    Duration (in ms):
                    <input type='text' id='duration' value='200' />
                </label>
                <label>
                    Delay (in ms):
                    <input type='text' id='delay' value='0' />
                </label>
                <label>
                    lock to bottom:
                    <input type='checkbox' id='lock' checked />
                </label>
            </div>
            <div class="wrap">
                Example:<br/>
                <code>jQuery('#menu').stickyfloat({duration: 400});</code>
                <h2>parameters:</h2>
                <ul>
                    <li><h3>duration    (200)</h3>the duration of the animation</li>
                    <li><h3>startOffset (number)</h3>the amount of scroll offset after the animations kicks in</li>
                    <li><h3>offsetY     (number)</h3>the offset from the top when the object is animated</li>
                    <li><h3>lockBottom  (true)</h3>set to false if you don't want your floating box to stop at parent's bottom</li>
                    <li><h3>delay       (0)</h3>delay in milliseconds  until the animnations starts</li>
                    <li><h3>easing      (linear)</h3>easing function (jQuery has by default only 'swing' &amp; 'linear')</li>
                </ul>
            </div>
        </div>
        <div class="footer">Footer</div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers