Scroll trigger

by ghlee

HTML

<div class="wrap">
  <div class="content">A</div>
  <div class="content">B</div>
  <div id="start" class="content">C</div>
  <div class="zoom"><!-- Image --></div>
</div>

CSS

.wrap {
  overflow-y: auto;
  padding: 10px;
  background-color: #eee;
}

.wrap .content {
  height: 600px;
  line-height: 600px;
  margin: 10px;
  text-align: center;
  background-color: #fff;
}

.zoom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-image: url("https://picsum.photos/200");
}

JavaScript

$(window).scroll(function () {
	var target = $('#start')[0].getBoundingClientRect(); // id="start" Element
  
  // Start zoom at #start element's position
	if (target.top - target.height <= 0) {
		$(".zoom").css({
			backgroundSize: (100 + (target.height - target.top) / 20) + "%"
		});
	}
});