imhateb,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<link href="http://prinzhorn.github.io/skrollr/examples/fixed-positioning.css" rel="stylesheet" type="text/css" />
<link href="http://prinzhorn.github.io/skrollr/examples/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.left {
height: 100px;
width:0%;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://prinzhorn.github.io/skrollr/dist/skrollr.ie.min.js"></script>
<![endif]-->
<script>
$(function(){
var h = $(window).height(), obj = {'data-0':'width:0%;background:hsl(200, 100%, 50%)'};
obj['data-'+h] = 'width:100%;background:hsl(920, 100%, 50%)'
$('.left').attr(obj);
var s = skrollr.init({
});
})
</script>
</head>
<body>
<div class="left" ></div>
</body>
</html>