Minor issues with scrolling nav bar
<p>So I have some code here that is to snap a navigation bar to the top of the screen, and I have two minor issues with it.</p>

<p>The first is that it does not work for IE9, and the second is that when scrolling via holding down a click on the scrollbar, when it reaches the point where the action is to occur, it snaps the scrollbar to the top of the screen and locks it until you unclick.</p>

<pre><code>$(window).on('scroll', function() {
    if (!docked &amp;&amp; init &lt; body.scrollTop() ) {
        nav_menu.addClass('docked').css({
            top: 0,
            position: 'fixed'
        });
        docked = true;
    }
    else if (docked &amp;&amp; body.scrollTop() &lt;= init) {
        nav_menu.removeClass('docked').css({
            position: 'absolute',
            top: init + 'px'
        });
        docked = false;
    }
});
</code></pre>

<p>This is an adaptation of the code used on the <a href="http://lesscss.org" rel="nofollow">LESS</a> page for jQuery, so I'd guess that it has something to do with how jQuery handles the functions, but it has me curious.</p>

<p>Edit:  Here is the relevant HTML</p>

<pre><code>    &lt;header&gt;
        &lt;section id="top-picture"&gt;&lt;img alt="Logo" src="img/top.png" /&gt;&lt;/section&gt;
        &lt;nav id="nav-menu"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="artists.php"&gt;Artists&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="artwork.php"&gt;Artwork&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="music.php"&gt;Music&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="download.php"&gt;Download&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul&gt;
            &lt;!-- Social Media section
                Facebook Like button --&gt;
                &lt;li&gt;&lt;div class="fb-like" data-href="urlhere" data-send="false" data-layout="button_count" 
                data-width="90" data-show-faces="false"&gt;&lt;/div&gt;&lt;/li&gt;
                &lt;!-- Tweet button --&gt;
                &lt;li&gt;&lt;a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-count="horizontal" 
                data-url="urlhere" data-via="user" data-related="user" data-text="text"&gt;Tweet&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;
</code></pre>

<p>Here is the full relevant JS</p>

<pre><code>jQuery(document).ready(function($){
    var nav_menu = $('#nav-menu');
    var body = $('body');
    var init = nav_menu.position().top;
    var docked = false;

    $(window).on('scroll', function() {
        if (!docked &amp;&amp; init &lt; body.scrollTop() ) {
            nav_menu.addClass('docked').css({
                top: 0,
                position: 'fixed'
            });
            docked = true;
        }
        else if (docked &amp;&amp; body.scrollTop() &lt;= init) {
            nav_menu.removeClass('docked').css({
                position: 'absolute',
                top: init + 'px'
            });
            docked = false;
        }
    });
});
</code></pre>

<p>And here is the relevant CSS, which uses LESS and Bootstrap:</p>

<pre><code>@import "colors"; // importing preset color list
@import "bootstrap";

@linkColor: lighten(@Maroon, 5%);

/* Structure */

body {
  background: @Black;
  z-index: 1;
}

section#top-picture {
  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  z-index: 300;
}

header {
  nav#nav-menu {
    background: @Black;
    position: absolute;
    top: 176px;
    width: 100%;
    border: 1px inset lighten(@Black, 30%);
    box-shadow: 0 0 15px 5px @White inset;
    -moz-box-shadow:  0 0 15px 0px @White inset;
    -webkit-box-shadow:  0 0 15px 0px @White inset;
    z-index: 500;
    ul {
      list-style-type: none;
      text-align: center;
      li {
        display: inline;
      }
      &amp;:first-child {
        padding-top: 1%;
        li {
          padding: 2.5%;
          a {
            .anchor-button;
            .btn-large;
            font-weight: bold;
            text-transform: uppercase;
            text-decoration: none;
          }
        }
      }
      &amp;:last-child {
        li {
          margin: 0 5%;
        }
      }
    }
  }
}
</code></pre>

<p>There is a picture located above the navbar, which is at section#top-picture.</p>
