examples/d3-scale.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
.outer, .outer2 {
    height: 2000px;
    position: relative;
    border: 1px solid skyblue;
}
.inner {
    font-size: 100px;
    width: 100%;
    border: 1px solid pink;
}
.meter {
    height: 20px;
    width: 0;
    background: blue;
    margin: 20px 0;
}
.stuck{
  position:fixed;
  top:0;
}


</style>

<p>This is a demo page for <a href="http://github.com/wsj/scroll-watcher/">scrollWatcher</a>.</p>
<p>In this example, we are using D3 to convert between the percentage-scrolled and another (arbitrary) scale.</p>
<p>So instead of going from 0 to 100, it goes from -860 to 4200.</p>


<div class="outer">
    <div class="inner">
        <div class="text"></div>
        <div class="meter"></div>        
    </div>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.11/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fixto/0.5.0/fixto.min.js"></script>
<script src="../scroll-watcher.js"></script>

<script type="text/javascript">

// create D3 scale, using rangeRound to ensure rounded numbers are produced
var scale = d3.scale.linear()
    .domain([0,100])
    .rangeRound([-860,4200]);

var onUpdate = function( scroll, $parent ){
    // map the percentage scrolled to our crazy scale
    var scaled = scale(scroll);
    $parent.find('.text').text( scaled );
    $parent.find('.meter').width( scroll + '%' );
}

scrollWatcher({
    onUpdate: onUpdate,
    parent: '.outer'
});

</script>