Div getting wider on scroll
body {
height: 1000px;
}
.container {
margin-top: 450px;
position: relative;
}
#expand {
background: tomato;
min-height: 400px;
min-width: 20%;
position: absolute;
will-change: width;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
var expandDiv = document.getElementById("expand");
var speed = 5;
function expanding() {
var scrolltop = window.pageYOffset; // get number of pixels document has scrolled vertically
var scrollAndSpeed = (scrolltop / speed);
//expandDiv.style.transform = "scale3d( " + Math.min(Math.max(scrollAndSpeed, 1), 3) + ",1)";
expandDiv.style.width = Math.min(Math.max(scrollAndSpeed, 20), 95) + "%";
}
window.addEventListener('scroll', function() { // on page scroll
requestAnimationFrame(expanding); // call parallaxing()
}, false);
<div class="container">
<div id="expand"></div
</div>