title: Keeping menu item fixed when scrolling, not before
body: <p>I've looked up multiple examples in JavaScript. But the result still turns up negetive. Here is the Situation.</p>
  
  <p>I have a website that have a Top Navigation. Depending on the Nav Button pressed, a menu to the left appears on the page with more selections.</p>
  
  <p>Example:
  You have <code>Home | Products | Crew | About</code></p>
  
  <p>User clicks "Products" and it opens up a new page with a Menu on the left showing</p>
  
  <pre><code>Desktops
  Laptops
  Notebooks
  eReaders
  Mp3 Players
  Tablets
  Phones
  </code></pre>
  
  <p>I want the menu on the left to be approximately 420px from the top when the user is fully scrolled up to the top. As he scrolls down it will scroll to the top. Once it reaches the top of the displayed page, it becomes fixed at the top location.</p>
  
  <p>The Nav Bar on the top is hard-coded into the Master Page. The Menu on the Left is a ContentPlaceHolder in the Master Page and the Content changes based on the page being viewed.</p>
  
  <p>I tried using the JavaScript code: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).on('scroll', function () {
          if ($('#bar')[0].offsetTop &lt; $(document).scrollTop()) {
              $("#bar").css({ position: "fixed", top: 0 });
          }
          if ($(document).scrollTop() &lt; $("#position-saver")[0].offsetTop) {
              $("#bar").css({ position: "static", top: 0 });
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>but it doesn't work. I can't figure out why. This is the Master Page Code.</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.Master.cs" Inherits="StasisGamerLounge.Site1" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;`
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Stasis Gamer Group - &lt;%: Page.Title %&gt;&lt;/title&gt;
      &lt;asp:PlaceHolder ID="PlaceHolder1" runat="server"&gt;     
            &lt;%: Scripts.Render("~/bundles/modernizr") %&gt;
      &lt;/asp:PlaceHolder&gt;  
      &lt;webopt:BundleReference ID="BundleReference1" runat="server" Path="~/Content/css" /&gt; 
      &lt;link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /&gt;
      &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;asp:ContentPlaceHolder runat="server" ID="HeadContent" /&gt;
      &lt;script type="text/javascript"&gt;
          $(document).on('scroll', function () {
              if ($('#bar')[0].offsetTop &lt; $(document).scrollTop()) {
                  $("#bar").css({ position: "fixed", top: 0 });
              }
              if ($(document).scrollTop() &lt; $("#position-saver")[0].offsetTop) {
                  $("#bar").css({ position: "static", top: 0 });
              }
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
          &lt;div class="float_right"&gt;
          &lt;section id="login"&gt;
                      &lt;asp:LoginView ID="LoginView1" runat="server" ViewStateMode="Disabled"&gt;
                          &lt;AnonymousTemplate&gt;
                                  &lt;a id="registerLink" runat="server" href="~/Account/Register.aspx"&gt;Register &lt;/a&gt; | 
                                  &lt;a id="loginLink" runat="server" href="~/Account/Login.aspx"&gt; Log in&lt;/a&gt;
                                  &lt;br /&gt;
                          &lt;/AnonymousTemplate&gt;
                          &lt;LoggedInTemplate&gt;
                          &lt;p&gt;
                              Greetings, &lt;a id="A1" runat="server" class="username" href="~/Account/Manage.aspx" title="Manage your account"&gt;
                                  &lt;asp:LoginName ID="LoginName1" runat="server" CssClass="username" /&gt;&lt;/a&gt;!
                              &lt;asp:LoginStatus ID="LoginStatus1" runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" /&gt;
                          &lt;/p&gt;
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;
              &lt;/section&gt;
          &lt;/div&gt;
      &lt;div class="bodywrapper"&gt;
          &lt;div class="logo"&gt;
          &lt;/div&gt;
          &lt;div class="header"&gt;
          &lt;/div&gt;
          &lt;div class="topnav"&gt;
              &lt;ul id="navbar"&gt;
                  &lt;li&gt;&lt;asp:HyperLink runat="server" ID="home" NavigateUrl="~/Default.aspx"&gt;Home&lt;/asp:HyperLink&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;asp:HyperLink runat="server" ID="games" NavigateUrl="~/Games.aspx"&gt;Games&lt;/asp:HyperLink&gt;&lt;/li&gt;
                 &lt;% if (Page.User.Identity.IsAuthenticated ) { %&gt; &lt;li&gt;&lt;asp:HyperLink runat="server" ID="myFiles" NavigateUrl="~/Drive.aspx"&gt;My Files&lt;/asp:HyperLink&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;asp:HyperLink runat="server" ID="events" NavigateUrl="~/Events.aspx"&gt;Events&lt;/asp:HyperLink&gt;&lt;/li&gt; &lt;% } %&gt;
                  &lt;li&gt;&lt;asp:HyperLink runat="server" ID="about" NavigateUrl="~/About.aspx"&gt;About&lt;/asp:HyperLink&gt;&lt;/li&gt;                    
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="contentwrapper"&gt;
          &lt;div class="leftMenu" id="bar"&gt;
              &lt;h3&gt;Menu&lt;/h3&gt;
              &lt;asp:ContentPlaceHolder ID="MenuContent" runat="server"&gt;
  
              &lt;/asp:ContentPlaceHolder&gt;
          &lt;/div&gt;`
  </code></pre>
  
  <p>Am I putting the Javascript in wrong, or what's going on here? Is there a different way to accomplish this in ASP.Net?</p>