header.html

<header>
	<span class="left"><a href="/4diac/index.php"><img src="/4diac/img/4diac.png" alt="Eclipse 4diac Logo"/></a></span>
	<span class="center">design once use everywhere</span>
	<span class="right">Open Source PLC Framework for <br>Industrial Automation &amp; Control</span>
</header>

<nav id="mainmenu">
	<div class="leftmenu"><img id="navlogo" class="dontshowlogo" alt="logo mono" src="/4diac/img/fordiac_mono.png" height="23"></div>
	<div class="menucenter">
		<ul>
			<li><a href="/4diac/index.php">Home</a>
				<ul>
					<li><a href="/4diac/en_ide.php">4diac IDE - Development Environment</a></li>
					<li><a href="/4diac/en_rte.php">4diac FORTE - Runtime Environment</a></li>
					<li><a href="/4diac/en_lib.php">4diac LIB - Function Block Library</a></li>
					<li><a href="/4diac/en_sys.php">4diac SYS - Example Projects</a></li>
				</ul>
			</li>
		</ul>
		<a href="/4diac/en_news.php">News</a>
		<a href="/4diac/en_eve.php">Events</a>
		<a href="/4diac/en_com.php">Support</a>
		<a href="/4diac/en_contribute.php">Contribute</a>
		<a href="/4diac/en_dow.php">Download</a>
		<a href="/4diac/en_help.php">Documentation</a>
	</div>
	<div class="rightmenu"></div>
</nav>
 <div id="stickyBuffer" class="dontshowlogo"></div>

<script>
window.onscroll = function() {myFunction()};

var mainMenu = document.getElementById("mainmenu");
var mainLogo = document.getElementById("navlogo");
var stickyBuffer = document.getElementById("stickyBuffer");
var offset = mainMenu.offsetTop;

function myFunction() {
  if (window.pageYOffset >= offset) {
	  mainMenu.classList.add("navsticky")
	  mainLogo.classList.remove("dontshowlogo");
	  stickyBuffer.classList.remove("dontshowlogo");
  } else {
	  mainMenu.classList.remove("navsticky");
	  mainLogo.classList.add("dontshowlogo");
	  stickyBuffer.classList.add("dontshowlogo");
  }
}
</script>