fixedで可変するヘッダー

HTML

<body>
  <header>
    <p><img src="http://placehold.jp/cc9999/333333/800x200.png"></p>
  </header>
  <div id="container">
    <img src="http://placehold.jp/9999cc/333333/1000x200.png">
  </div>
</body>

SCSS

body {
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
  height: auto;
}
header {
  position: sticky;
  top: 0;
  overflow: hidden;
}
#container {
  height: 1000px;
}