JSFiddle - React, Tailwind, and code Playground

by gutek

HTML

<div class="topbar"></div>
<ul>
    <li><a href="#test1">The Big Lebowski</a></li>
    <li><a href="#test2">Samuel L. Jackson</a></li>
    <li><a href="#test3">Chuck Norris</a></li>
</ul>

<section id="test1">
    <h1>The Big Lebowski</h1>
    <p>
    Lebowski ipsum fine, Dude. As if it's impossible to get some nail polish, apply it to someone else's toe. Well sir, it's this rug I have, really tied the room together. They did not receive the money, you nitwit! They did not receive the goddamn money. HER LIFE WAS IN YOUR HANDS! We wanted to talk about little Larry. May we come in? Lady, I got buddies who died face-down in the mud so you and I could enjoy this family restaurant!
    </p><p>
I know my rights. We're scattering the fucking ashes! Hey, relax man, I'm a brother shamus. They won't hurt us, Donny. These men are cowards. Eight-year-olds, Dude. My name's Da Fino! I'm a private snoop! Like you, man! Shomer shabbos. Yeah well, that's just, ya know, like, your opinion, man. Fuck it, Dude. Let's go bowling. That wasn't her toe. Fuckin' A. The Knutsens. It's a wandering daughter job. Bunny Lebowski, man. Her real name is Fawn Knutsen. Her parents want her back.
</p><p>
Sure you'll see some tank battles. But fighting in desert is very different from fighting in canopy jungle. Vee belief in nossing. That, or Duder. His Dudeness. Or El Duderino, if you know, you're not into the whole brevity thing. You want a toe? I can get you a toe, believe me. There are ways, Dude. You don't wanna know about it, believe me. I SAY VEE CUT OFF YOUR CHONSON!
</p><p>
Where's my goddamn money, you bum?! Come on, Donny, they were threatening castration! Call the medics, Dude. They call Los Angeles the City of Angels. I didn't find it to be that exactly, but I'll allow as there are some nice folks there. 'Course, I can't say I seen London, and I never been to France, and I ain't never seen no queen in her damn undies as the fella says. But I'll tell you what, after seeing Los Angeles...

CSS

body {
    padding-top: 200px;
}

h1 {
    font-weight: bold;
    font-size: 20px;
}

.topbar {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1000;
    background-color: black;
    width: 100%;
    height: 200px;
}

JavaScript

(function (window, $, undefined) {

    'use strict';
    $(function () {

        var $window = $(window),
            elementHeight = $('.topbar').height();

        function fixHashLinking() {
            var $hash = $(window.location.hash),
                fixedTop;
            if (window.location.hash && $hash.length) {
                fixedTop = $hash.offset().top - elementHeight;
                $window.scrollTop(fixedTop);
            }
        }

        $window.bind('hashchange', function () {
            fixHashLinking();
        });

        fixHashLinking();
    });

})(window, jQuery);