JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<script src="http://open.mapquestapi.com/sdk/js/v7.0.s/mqa.toolkit.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="http://manos.malihu.gr/tuts/custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="map-wrapper">
    <div id="map"></div>
</div>
<div id="wrapper">
    <div id="slider">
    </div>
    <div id="container">
        <div id="content">
            <div class="overflow">&lt;anchor&gt;
                <div class="item">foo</div>
            </div>
            <p>Lorem ipsum dolor sit amet, in reprehenderit in voluptate velit esse cillum
                dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
            <div
            class="overflow">&lt;anchor&gt;
                <div class="item2">foo</div>
        </div>
        <p>Lorem ipsum dolor sit amet, in reprehenderit in voluptate velit esse cillum
            dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
        <div
        class="overflow">&lt;anchor&gt;
            <div class="item">foo</div>
    </div>
    <p>Lorem ipsum dolor sit amet, in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</p>
    <div
    </div></div>
</div>

CSS

body {
    margin: 0;
    overflow: hidden;
}
* {
    box-sizing: border-box;
}

#slider{
    height: 600px;
    position: absolute;
    left: 100px;
}
#wrapper {
    border: 1px solid green;
    width: 110px;
    position: relative;
}
#container {
    width: 100px;
    z-index: 2;
    position: relative;
}
#content {
    top: 0;
    border: 1px solid yellow;
    position: absolute;
    width: 100px;
}
div.overflow {
    position: relative;
}
div.item {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 90px;
    position: absolute;
    top: 20px;
    left: 50px;
    background: green;
    z-index: 2;
}
div.item2 {
    border: 1px solid red;
    display: block;
    height: 100px;
    width: 300px;
    position: relative;
    background: green;
    z-index: 3;
}
#logo {
    position: fixed;
    color: green;
}
#map-wrapper {
    position: fixed;
    border: 1px solid red;
    top: 0px;
    bottom: 0;
    left: 110px;
    right: 0px;
    z-index: 1;
}
#map {
    width: 100%;
    height: 100%;
}

JavaScript

var options = {
    elt: document.getElementById('map'),
    zoom: 13,
    latLng: {
        lat: 40.735383,
        lng: -73.984655
    },
    mtype: 'osm',
    bestFitMargin: 0,
    zoomOnDoubleClick: true
};

window.map = new MQA.TileMap(options);


MQA.withModule('largezoom', function () {

    map.addControl(
    new MQA.LargeZoom(),
    new MQA.MapCornerPlacement(MQA.MapCorner.TOP_LEFT, new MQA.Size(5, 5)));

});

MQA.withModule('mousewheel', function () {
    map.enableMouseWheelZoom();
});

$('#wrapper').bind('mousewheel', function (event) {
    var velocity = 10;
    var top = parseInt($('#content').css('top'), 10);
    console.log(top);
    var event_value = -(event.originalEvent.wheelDeltaY)
    console.log(event_value);
    var pos = top - (event_value / velocity);

    console.log(pos);

    if (pos > 0) pos = 0;

    console.log(pos);


    $('#content').css('top', pos);


    return false;
});