滚动时将元素旋转180度

Question

当用户在网页上向下滚动时，我希望将图像旋转180度。旋转应该在图像在视口中可见的时间内发生，并且当用户向上滚动时图像应该旋转回其原始位置。

我大部分时间都在工作，但有时旋转会在看似随机的180度以下停止。我无法弄清楚为什么，并希望确保图像始终旋转到180.

var iconRotate = $('.icon-rotate img');
if (iconRotate.length != 0) {
	$(window).scroll(function () {
		var page = window.pageYOffset,
		inner = window.innerHeight,
		result = (180 * page / (inner/3)); 

		if (result < 180) {
      console.log(result);
			iconRotate.css({transform: 'rotate(-' + result + 'deg)'});
		}
	});
}

.icon-rotate {
  width:300px;
}

img {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="icon-rotate">
  <img src="http://68.media.tumblr.com/6324fd64b78c316379713480b8e44d29/tumblr_nd1rffWqEa1ryzl2ko1_1280.jpg" />
</div>

Answer 1

你应该真的根据滚动做一个百分比，你可以滚动最多。

＆＃13;

＆＃13;

http {
  // ...
  keepalive_timeout 180s;
}

＆＃13;

var iconRotate = $('.icon-rotate img');
if (iconRotate.length != 0) {
	$(window).scroll(function () {
		var scroll = $(window).scrollTop(),
		maxScroll = $(document).height()-$(window).height();
		iconRotate.css({transform: 'rotate(-' + (180 * scroll/maxScroll) + 'deg)'});
	});
}

＆＃13;

.icon-rotate {
  width:300px;
}

img {
  width: 100%;
}

＆＃13;

＆＃13;

＆＃13;