JSFiddle - React, Tailwind, and code Playground

HTML

<body class="full-width-content">


  <div class="site-container">
    <nav class="nav-primary">
      <div class="wrap">
        <ul class="menu genesis-nav-menu menu-primary">
          <li class="menu-item"><a href="#">Home</a>
          </li>
          <li class="menu-item"><a href="#">News</a>
          </li>
          <li class="menu-item"><a href="#">Ranking</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="site-inner">
    <div class="content-sidebar-wrap">
      <main class="content">
        <article class="page entry">
<div>
          <h1>Test Article</h1>
          </div>
        </article>
      </main>
    </div>
  </div>
  <div id="mw-panel" class="mw_panel">
    <div>
      <h3>Navigation</h3>
      <div>
        <ul>
          <li><a href="#">Letzte Ă„nderungen</a>
          </li>
        </ul>
      </div>
    </div>

      <h3>Werkzeuge</h3>
      <div>
        <ul>
          <li><a href="#">Datei hochladen</a>
          </li>
          <li><a href="#">Spezialseiten</a>
          </li>
        </ul>
      </div>
  </div>
</body>

CSS

.content .entry {
    margin-top: 40px;
  padding-bottom: 400px;
}
.mw_panel{
position: absolute;  
  border: 2px solid black;
}

JavaScript

var menu = document.getElementsByClassName("nav-primary");
    var Truemenu=menu[0].offsetTop+menu[0].offsetHeight;
    var widget = document.getElementById("mw-panel");
    
    var difference = widget.offsetTop - Truemenu;
    if (difference > 100) {
      document.getElementById("mw-panel").style.top = (Truemenu + 100) + "px";
    }
    
    console.log (widget.offsetTop)
    console.log (menu[0].offsetTop+menu[0].offsetHeight)