STICKY BUTTONS

by bizamajig

HTML

<div class="container">
      <header>
        <h1>jQuery StickyButtons</h1>
        <p>A jQuery plugin that makes buttons (in fact any thing!)
          stick to the top as the user scrolls down to fill in a long
          form so that when they need to save or click on the button,
          they don't need to scroll back to the top again. Start
          scrolling to see it in action!</p>
      </header>
      <menu>
        <button>Save</button>
        <button class="warning">Save and continue editing</button>
        <button class="danger">Delete</button>
      </menu>
    <div class="longDiv">
        <section>
          <h2>Imagine this section contains a long form!</h2>
        </section>
        <section>
          <h2>Now scroll down some</h2>
        </section>
        <section>
          <h2>No need to scroll up to click on the buttons</h2>
        </section>
        <section>
          <h2>Now scroll back to the top to make the sticky buttons disappear</h2>
        </section>
      </div>
      <menu>
        <button>Save</button>
        <button class="warning">Save and continue editing</button>
        <button class="danger">Delete</button>
      </menu>
      <footer>
        For source code, usage, documentation and license (MIT) please visit <a href="http://github.com/naiquevin/jquery-sticky-buttons">github repo</a>
      </footer>
    </div>

<script>
(function ($, window, undefined) {
    "use strict";

    var _bid_attr_name = 'sticky-btn-id';
    var _hidden_state_class = 'hiddenStickyBtn'

    var _defaults = {
        menuBg: '#2c2c2c',
        menuHeight: '20px;',
        menuPadding: '5px 1%',
        menuBtnMargin: '10px'
    };

    var StickyButtons = function (elem, options) {
        this.$el = elem;
        this.options = $.extend(_defaults, options);
        this.init();
    };

    StickyButtons.prototype.init = function () {

        var opts = this.options;
        var that = this;

        var stickToMenuBar = function ($elem)...

CSS

body { background: #f2f2f2; color: #666; font-family: helvetica; }
a { color: #c30000; }
.container { width: 960px; margin: 0 auto; background: #fff; }
header { height: 140px; padding: 10px 2%; width: 96%;  }
menu { height: 30px; width: 96%; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px 2%; text-align: right; }
.longDiv { height: 1000px; }
.longDiv section { height: 40px; padding: 10px 0; margin-bottom: 200px; text-align: center; }
.longDiv section h2 { color: #ccc;  }
button { background: green; #00921c; color: #fff; padding: 5px; border: none; cursor: pointer; }
button.danger { background: #c30000; }
button.warning { background: #cf7c00; }
footer { padding: 10px; text-align: center; }

JavaScript

$("button").click(function () {
        alert('You clicked on "'+$(this).text()+'"');
    });

    $("button").stickybuttons();