JSFiddle - React, Tailwind, and code Playground

by rodneyrehm

HTML

<header>
    <hgroup>
        <h1><a href="http://workingdraft.de">Working Draft</a></h1>
        <h2>Wöchentlicher News-Podcast für Webdesigner und -entwickler</h2>
    </hgroup>
</header>


<p style="height:0; padding-bottom: 10000px; margin-bottom: -10000px">scrollbars</p>
<p style="margin-top: 100px">scroll down and watch the header become smaller</p>
<p style="margin-top: 100px">scroll down and watch the header become smaller</p>
<p style="margin-top: 100px">scroll down and watch the header become smaller</p>
<p style="margin-top: 100px">scroll down and watch the header become smaller</p>
<p id="offset">0px</p>

CSS

* {
    margin: 0; 
    padding:0;
}
html {
    font-size: 62.5%; /* 10px at 16px initial size */
    line-height: 1.5em;
    font-family: Verdana, Arial, sans-serif;
}

a {
    text-decoration:none;
}
a:link {
    color: #850051;
    border-bottom:1px solid #850051;
}
a:visited {
    color: #a35e88;
    border-bottom:1px dotted #a35e88;
}
a:hover {
    text-decoration:none;
    border-bottom:1px solid transparent;
}
a:active {
    color: #C00;
}

header {
    color: #8F098F;
    position: fixed;
    top: 0; 
    right: 0; 
    left: 0;
    background: #EEE;
    
    /* making things smoother */
    -webkit-transition: font-size     linear 0.5s,
                        line-height   linear 0.5s,
                        padding       linear 0.5s;
       -moz-transition: font-size     linear 0.5s,
                        line-height   linear 0.5s,
                        padding       linear 0.5s;
            transition: font-size     linear 0.5s,
                        line-height   linear 0.5s,
                        padding       linear 0.5s;
}
header > hgroup > h1 {
    font-size: 2.8em;
    padding: 1em 1em 1.0em 20px;
    font-weight: bold;
    line-height: 0.75em;
}
header > hgroup > h1 > a {
    color: #8F098F !important; /* leck mich :P */
}
header > hgroup > h2 {
    font-size: 2.0em;
    color: #a35e88;
    padding:  0 4em 1em 20px;
    line-height: 0.75em;
}
header > hgroup:after {
    position: absolute;
    top: 1em;
    right: 1em;
    
    width: 10em;
    height: 10em;

    content: "";
    background: url(http://workingdraft.de/wp-content/themes/Working-Draft/icon.png) center center no-repeat;
    
    -moz-background-size: cover;
         background-size: cover;
}

JavaScript

var $header = $('body > header'),
    $offset = $('#offset'),
    $document = $(document),
    scroll = {
        min: 50,
        max: 100
    },
    current = null,
    size = {
        min: 6,
        max: parseInt($header.css('font-size') || "0", 10)
    };

// make sure min < max
if (size.min > size.max) {
    var t = size.min;
    size.min = size.max;
    size.max = t;
    delete t;
}

// calculate ranges
size.range = size.max - size.min;
scroll.range = scroll.max - scroll.min;

// bind scroll handler
$(window).on('scroll', function(e) {
    // get current scroll offset
    var so = $document.scrollTop(),
        // reversed percentage scrolled withing scroll.range
        p = 1 - (so - scroll.min) / scroll.range,
        s;
    
    // respect boundaries
    if (so < scroll.min) {
        p = 1;
        $offset.text(so +"px (below bounds)");
    } else if (so > scroll.max) {
        p = 0;
        $offset.text(so +"px (above bounds)");
    } else {
        $offset.text(so +"px (within bounds)");
    }
    
    // calculate font-size according to scroll offset
    s = Math.round(size.min + p * size.range);
    // abort if that's our current value, no need to access DOM
    if (s == current) {
        return;
    }
    
    // update font-size
    current = s;
    $header.css('font-size', s);
});