Ява-Нуб,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height:2000px;
margin:0;
padding:0;
}
.hot{
padding:0;
height:2000px;
width:200px;
margin:0 auto;
background-color:#FF00FF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var el = $(".hot"), from = el.width(), height = 500;
$(window).on("scroll resize", function() {
var to = $(window).width()-2, a = $(window).scrollTop() / height;
a > 1 && (a = 1);
var w = from + (to - from) * a | 0;
el.width(w)
})
});
</script>
</head>
<body>
<div class="hot"></div>
</body>
</html>