JSFiddle - React, Tailwind, and code Playground

header always top

by slawe

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="robots" content="noindex" />
  <title>My Weblog</title>
  <!--[if lt IE 9]><script src="../j/html5.js"></script><![endif]-->
  <link rel="stylesheet" href="style-html5.css" />
  <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
  <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="opensearch.xml" />
</head>

<body>

  <header>

    <hgroup>
      <h1>My Weblog</h1>
      <h2>A lot of effort went into making this effortless.</h2>
    </hgroup>
    <nav>
      <ul>
        <li><a href="../semantics.html">home</a></li>
        <li><a href="../semantics.html">blog</a></li>
        <li><a href="../semantics.html">gallery</a></li>
        <li><a href="../semantics.html">about</a></li>
      </ul>
    </nav>
   </header>

  <article>
    <header>
      <time datetime="2009-10-22" pubdate>October 22, 2009</time>
      <h1>
        <a href="../semantics.html" rel="bookmark" title="link to this post">Travel day</a>
      </h1>
    </header>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec hendrerit felis accumsan turpis pretium tempor. Duis eu turpis nunc, ut euismod nisl. Aliquam erat volutpat. Proin eu eros mollis dui fringilla sodales. Curabitur venenatis tincidunt felis ac congue. Maecenas at odio dui, sit amet congue sapien. Proin placerat feugiat eros, non mollis quam pharetra at. Duis gravida eleifend ligula nec auctor. Fusce nulla diam, fringilla non ultrices in, iaculis eu tellus. Sed mollis consequat turpis sit amet facilisis. Donec pretium luctus aliquet. Curabitur placerat varius purus vel congue. Aliquam erat volutpat. Curabitur vitae eros sed turpis sollicitudin mattis. Morbi venenatis pulvinar nunc, at vulputate massa placerat a. Nam et tortor id nisi consequat tempor eget sit amet risus. Praesent bibendum, velit eu hendrerit porttitor, elit mauris posuere nisl, non...

CSS

/* HTML5-specific CSS setup */
article,aside,figure,footer,header,hgroup,nav,section{display:block}

html{background:white;color:black}
body{font:normal medium 'Gill Sans','Gill Sans MT','Goudy Bookletter 1911','Linux Libertine O','Liberation Serif',Candara,serif;padding:0;margin:0 auto;width:40em;line-height:1.75;word-spacing:0.1em}
.a{font: 100%/1 "Arial Unicode MS",FreeSerif,OpenSymbol,"DejaVu Sans",sans-serif}
a{background:transparent;text-decoration:none;border-bottom:1px dotted}
a:hover{border-bottom:1px solid}
a:link{color:#1b67c9}
a:visited{color:darkorchid}
a.simple{border:0 !important;float:left;display:block;margin-right:20px}
h1 a{color:inherit !important}
h2,p{margin:1.75em 0;font-weight:normal}
h1,h2{font-size:medium}
header{background:black;color:white;margin:0;padding:1.75em 0}
nav {text-align: center; width:640px; height: 40px; background-color: black;}
nav a:link{color: white}
nav a:visited{color:white; text-align: center}
h1{letter-spacing:1em;text-align:center;margin:0}
h2{text-align:center;font-size:medium;line-height:2.154}
article{margin-top: 20px;}
article header,section header{background:white;color:black;margin:0;padding:0}
article h1,section h1{letter-spacing:0;text-align:left;margin:1.75em 0}
#arc th,#arc td{list-style:none;margin:0;padding:0}
#arc th,.r{text-align:right}
#arc th{padding:0 1.75em 0 0;vertical-align:baseline}
#arc{border-collapse:collapse}
footer,.c{text-align:center;clear:both}
time{float:right;font-size:small;margin:2px 0 0 0}
.review time{float:none;font-size:inherit;margin:inherit}
nav ul{margin:0;padding:0 1em 0 0;text-align:center}
nav li{display:inline;padding-left:1em}
dt{clear:left;float:left;width:8em}
dd{margin-left:8em}
address{font-style:normal}
address+p{margin-top:0}
img.me{display:block;float:right;border:1px solid black;margin-left:1.75em}
.phonebook article p,.phonebook article address{margin:0 0 0 120px}
.review article p{margin:1.75em 0}
.sectionSign:before{content:'\00A7'}

JavaScript

$(document).ready(function(){
    $(document).on('scroll', function(){
        if ($('nav')[0].offsetTop < $(document).scrollTop()){
            $('nav').css({position: 'fixed', top:0});
        }
        if ($(document).scrollTop() < $('h2')[0].offsetTop){
            $('nav').css({position: 'static', top: 0});           
        }   
    });    
});