Header

header.markdown

Header

A Pen by takanorioki on CodePen.

License.

index.html

<header>header</header>
<div id="sub_header" class="sub">sub</div>
<main>main</main>

script.js

		$(window).on('scroll', function() {
			var topInitial = $('#sub_header').offset().top;
      var topPosition = 100 - $(window).scrollTop();
			if (topPosition > 0) {
				$('.sub').css('top', topPosition);
			} else if(topPosition <= 0) {
				$('.sub').css('top', 0);
			}
		});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

* {
  margin: 0;
  padding: 0;
}

header {
  height: 100px;
  background: #ddf;
}

.sub {
  display: block;
  width: 100%;
  height: 50px;
  background: #ade;
  position: fixed;
  top: 100px;
}

main {
  height: 2000px;
  padding-top: 50px;
}