JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div id="wrapper_nav" style="right: 270.5px;">
<div id="navigator" style="opacity: 1; display: none; width: 41px;">
<div id="arrow" style="width: 31px;"><img alt="" src="http://media1.tchibo-content.de/st/150e9108/hmmh/img/shared/scrollnavigator/header_pfeil_hoch.jpg" style="display: block;" id="arrowup"><img alt="" src="http://media1.tchibo-content.de/st/150e9108/hmmh/img/shared/scrollnavigator/header_pfeil.jpg" id="arrowdown" style="display: none;"></div>
<div id="shadow_top"></div>
<div><img alt="" src="http://media4.tchibo-content.de/newmedia/page_navi/scrollnavi/50ee184c69dabe96/KW17_scrollnavi_HVK.jpg" id="bg" style="height: 770px;"></div>
<div id="shadow_right" style="height: 778px;"></div>
<div id="shadow_wrapper">
<div id="shadow_bottom_left"></div>
<div id="shadow_bottom" style="width: 18px;"></div>
<div id="shadow_bottom_right"></div>
</div>
<div id="peek" style="top: 221.128px; opacity: 1;">
<div id="locator" style="width: 59px;">
<div id="top" style="width: 59px;">
<div id="ecke1">&nbsp;</div>
<div id="rahmen1" style="width: 23px;">&nbsp;</div>
<div id="ecke2">&nbsp;</div>
</div>
<div id="middle" style="width: 59px;">
<div id="rahmen4" style="height: 20.6979px;">&nbsp;</div>
<div id="rahmen2" style="height: 20.6979px; left: 47px;">&nbsp;</div>
</div>
<div id="bottom" style="width: 59px;">
<div id="ecke4">&nbsp;</div>
<div id="rahmen3" style="width: 23px;">&nbsp;</div>
<div id="ecke3">&nbsp;</div>
</div>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>

JavaScript

var scrollnavigator = (function(Z, H) {
        var W = 370;
        var d = 8;
        var D = 600;
        var e = 1200;
        var L = 30;
        var S = "sn_hidden";
        var A = 5000;
        var P = {
            OFF: 1,
            ACTIVE: 2,
            HIDDEN: 3,
            DIMMED: 4,
            HIDDEN_OFF: 5
        };
        var M = false;
        var a = false;
        var J = null;
        var j;
        var R;
        var E = false;
        var X;
        var b;
        var C = false;
        var Q = false;
        var F = false;
        var f = 0;
        Z("#bg").load(function() {
            if (!a && Z("#navigator").length > 0) {
                a = true;
                g()
            }
        });
        Z(window).load(function() {
            var l = Z.browser;
            var k = l.name;
            var m = l.versionNumber;
            if (!a && Z("#navigator").length > 0) {
                if ("msie" != k || m != 6) {
                    a = true;
                    g()
                }
            }
        });

        function g() {
            f = document.documentElement.clientWidth / Z(window).width();
            var l = cookies.getPreference(S);
            if (l) {
                i(P.HIDDEN)
            }
            Z("#navigator").click(function(m) {
                B(m);
                N(H, true, H)
            });
            Z(window).scroll(function() {
                if (j == P.OFF) {
                    return
                }
                var m = document.documentElement.clientWidth / Z(window).width();
                if (m !== f) {
                    K();
                    f = m
                }
                if (j == P.DIMMED) {
                    i(P.ACTIVE)
                }
                c();
                I();
                if (!M && R) {
                    var n = j;
                    K();
                    i(n);
                    c();
                    I();
                ...