JSFiddle - React, Tailwind, and code Playground

by Rodrigo Carioca

HTML

<header>
  <div class="content">
    <img src="http://seeklogo.com/images/L/Light_Logomarca-logo-0C4DF9D65C-seeklogo.com.gif" alt="logo" />
    <ul class="menu">
      <li>menu-item</li>
      <li>menu-item</li>
      <li>menu-item</li>
    </ul>
  </div>
</header>
<main>
  <div class="content">
    <h1>ConteĂşdo</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis, excepturi corrupti repellat magni error rem possimus et mollitia at sunt, numquam, omnis expedita. Rem libero, officiis!</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum cupiditate nisi minus quis,...

CSS

header {
  position: absolute;
  top: 0px;
  width: 100%;  
  min-width: 700px;
  border: 1px solid black;
  background-color: #ccc;
}
.logo {
  display: inline-block;
  
}
img {
  float: left;
  width: 70px;
  height: 70px;
  max-width: 100%; 
}
.menu {
  float: right;
}
.menu li {
  display: inline-block;
  border: 1px solid black;
  padding: 5px;
}
.content {
  width: 700px;
  margin: 0 auto;
}
.content {
  width: 700px;
  margin: 0 auto;
}
main {
  margin-top: 150px;
}

JavaScript

window.xyScroll = function() {
  if (window.scrollX != null && window.scrollY != null) return { x: window.scrollX, y : window.scrollY };
  else return { x: document.body.parentNode.scrollLeft, y : document.body.parentNode.scrollTop };
};

window.onscroll = function(e) {
  document.querySelector('header').style.top = window.xyScroll().y + 'px';
};