title: Change menu color when scrolled past certain div
body: <p>I'm trying to make my menu, that sticks on the top of the page, to change color when I passed scrolling a certain div.</p>
  
  <p>I guess the problem lies in this line: <code>var mainbottom = $('#main').offset().top + $('#main').height();</code>
  Because I get the error from chrome: <code>Uncaught TypeError: Cannot read property 'top' of undefined</code> Whats wrong? </p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
      &lt;style type="text/css"&gt;
          .nav {
              background-color:transparent;
              color:#fff;
              transition: all 0.25s ease;
              position:fixed;
              top:0;
              width:100%;
              background-color:#ccc;
              padding:1em;
          }
  
          .nav.past-main {
              background-color:#fff;
              color:#444;
          }
  
          #main {
              height:500px;
              background-color:red;
          }
  
          #below-main {
              height:1000px;
              background-color:#eee;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script type="text/javascript"&gt;
          var mainbottom = $('#main').offset().top + $('#main').height();
  
          $(window).on('scroll',function(){
              stop = Math.round($(window).scrollTop());
              if (stop &gt; mainbottom) {
                  $('.nav').addClass('past-main');
              }
              else {
                  $('.nav').removeClass('past-main');
              }
          });
      &lt;/script&gt;
  
      &lt;nav class="nav"&gt;
        &lt;a href="#"&gt;link&lt;/a&gt;
      &lt;/nav&gt;
      &lt;div id="main"&gt;#main&lt;/div&gt;
      &lt;div id="below-main"&gt;#below-main&lt;/div&gt;
  
      &lt;script type="text/javascript" src="jquery-1.11.1.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I got the code from here: <a href="http://codepen.io/taylorleejones/pen/KJsvz?editors=011" rel="nofollow">http://codepen.io/taylorleejones/pen/KJsvz?editors=011</a> but doesn't seem to work for me
  Thanks! :)</p>