JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<div class="side-bg side-bg-left"></div>
<div class="side-bg side-bg-right"></div>
<div id="container">
    <div id="topNav">some links<span style='float:right'>More Links</span>

    </div>
    <div id="banner">
        <img class="parallax-layer" src="https://dl.dropbox.com/u/14037764/Development/jsfiddle/ak_logo_update.jpg"
        alt="" />
    </div>
    <div id="navwrap">NAV WRAP</div>
</div>

CSS

body {
    min-width:980px;
}
#container {
    padding: 0px 0 2500px;
    width:960px;
    margin:0 auto;
}
#navwrap {
    position:absolute;
    left:10px;
    right:10px;
    height: 50px;
    background-color: #C00;
    text-align:center;
}
.fixed {
    position:fixed !important;
    top:0;
}
#topNav {
    position:fixed;
    top:0;
    z-index:10;
    left: 10px;
    right:10px;
}
@media all and (max-width: 980px) {
    #navwrap {
        position:relative;
        width:960px;
        left:0;
        right:0;
    }
    #topNav {
        position:relative;
        width:960px;
        left:0;
        right:0;
    }
    .fixed {
        position:absolute !important;
        top:auto;
        left:0;
        right:0;
    }
}
.side-bg {
    position:fixed;
    top:0;
    bottom:0;
    width:40px;
    background: url('http://t3.gstatic.com/images?q=tbn:ANd9GcTSlX9qDEhc1ck0AOL4lt0Z0SrX2aPYaaI9NAdn6E-NrBR6iWjo');
    background-position: 0 0;
    display:none;  
    transition: all 300ms none;
-moz-transition: all 300ms none; /* Firefox 4 */
-webkit-transition: all 300ms none; /* Safari and Chrome */
-o-transition: all 300ms none; /* Opera */
    
}
.side-bg-right{ 
right:0;
}
.side-bg-left{ 
left:0;
}

@media all and (min-width: 1040px) {
.side-bg {
    display:block;
    }
    
      #navwrap, #topNav, .fixed {
        left:50px;
        right:50px;
    }
}

#banner {
    width:960px;
    height:350px;
    overflow:hidden;
    position:relative;
}
#banner::after {
    content:" ";
    background: url('https://dl.dropbox.com/u/14037764/Development/jsfiddle/knox.png') no-repeat;
    width: 463px;
    height: 347px;
    position:absolute;
    left:50%;
    bottom:0px;
    margin-left:-231px;
}
.parallax-viewport {
    position: relative;
    /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
    padding: 0 110px;
}

JavaScript

if (!jQuery.event.special.frame) {

    // jquery.events.frame.js
    // 1.1 - lite
    // Stephen Band
    // 
    // Project home:
    // webdev.stephband.info/events/frame/
    //
    // Source:
    // http://github.com/stephband/jquery.event.frame

    (function (d, h) {
        function i(a, b) {
            function e() {
                f.frameCount++;
                a.call(f)
            }
            var f = this,
                g;
            this.frameDuration = b || 25;
            this.frameCount = -1;
            this.start = function () {
                e();
                g = setInterval(e, this.frameDuration)
            };
            this.stop = function () {
                clearInterval(g);
                g = null
            }
        }

        function j() {
            var a = d.event.special.frame.handler,
                b = d.Event("frame"),
                e = this.array,
                f = e.length;
            for (b.frameCount = this.frameCount; f--;) a.call(e[f], b)
        }
        var c;
        if (!d.event.special.frame) d.event.special.frame = {
            setup: function (a) {
                if (c) c.array.push(this);
                else {
                    c = new i(j, a && a.frameDuration);
                    c.array = [this];
                    var b = setTimeout(function () {
                        c.start();
                        clearTimeout(b);
                        b = null
                    }, 0)
                }
            },
            teardown: function () {
                for (var a = c.array, b = a.length; b--;) if (a[b] === this) {
                    a.splice(b, 1);
                    break
                }
                if (a.length === 0) {
                    c.stop();
                    c = h
                }
            },
            handler: function () {
                d.event.handle.apply(this, arguments)
            }
        }
    })(jQuery);

}

//...