title: Javascript: Vertical Spacing between two elements
body: <p>My website consists of a navigation bar (class <code>.nav-primary</code>), a widget box (id <code>#mw-panel</code>) and an article. Recently, I tried to move the widget box up to the top, by applying the following changes to my CSS file:</p>
  
  <pre><code>.mw-panel{top: 50px;}
  </code></pre>
  
  <p>The problem with this option was, that my element was fixed to a specific position. Instead I wanted the widget element to be exactly 100px under the menu bar (and moving when I am scrolling down the page). Instantly, I knew that JavaScript would be the correct way to solve this problem. </p>
  
  <p>Because I had no success, I asked the <a href="https://stackoverflow.com/questions/34596371/">StackOverflow community</a>, which helped me a lot. </p>
  
  <p>The JavaScript code in the JS section of the attached code snippet, was partially done by me, but it does not work as it should. </p>
  
  <p>Can someone explain me what I need to change to get this JS code working? Again, <code>#mw-panel</code> has to be positioned exactly 100px beneath <code>.nav-primary</code>. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var menu = document.getElementsByClassName("nav-primary")[0];
  var widget = document.getElementById("mw-panel");
  var difference = widget.offsetTop - menu.offsetBottom;
  if (difference &gt; 100) {
  document.getElementById("mw-panel").style.top = (menu.offsetBottom + 100) + "px";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content .entry {
      margin-top: 40px;
    padding-bottom: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="full-width-content"&gt;
  
    &lt;link rel="stylesheet" id="child-theme-css" href="http://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" &gt;
    &lt;div class="site-container"&gt;
      &lt;nav class="nav-primary"&gt;
        &lt;div class="wrap"&gt;
          &lt;ul class="menu genesis-nav-menu menu-primary"&gt;
            &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="menu-item"&gt;&lt;a href="#"&gt;News&lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="menu-item"&gt;&lt;a href="#"&gt;Ranking&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
    &lt;div class="site-inner"&gt;
      &lt;div class="content-sidebar-wrap"&gt;
        &lt;main class="content"&gt;
          &lt;article class="page entry"&gt;
  &lt;div&gt;
            &lt;h1&gt;Test Article&lt;/h1&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="mw-panel"&gt;
      &lt;div&gt;
        &lt;h3&gt;Navigation&lt;/h3&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Letzte Änderungen&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
        &lt;h3&gt;Werkzeuge&lt;/h3&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Datei hochladen&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Spezialseiten&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>