希望在滚动时来回旋转图像

Question

Looking to rotate an image 180 degrees clockwise one direction upon scrolling, then as you scroll backup the other direction it would rotate 180 degrees counterclockwise.

This guy does it, but it's continuous. I'm looking for it to stop or lock-in at 180 one way then 180 the other as you scroll or back to 0. So basically it's pointing in the direction you are scrolling. By default it would start by pointing downwards.

Rotation Reference

$(function() {
     var $plane = $('.plane'); // Cache your elements!

     $(window).scroll(function() {
         if ($(this).scrollTop() > 10) {
             $plane.css({transform: 'rotate('+ window.pageYOffset%180 +'deg)'});
         } elseif ($(this).scrollTop() < 10); {
             $plane.css({transform: 'rotate('+ window.pageYOffset%-180 +'deg)'});
         }
     });

});

Answer 1

This one works for me on FF and Chrome:

$(function() {

  var $plane = $('.plane'); // Cache your elements!

  $(window).scroll(function() {  
      $plane.css({transform: 'rotate('+ (180*window.pageYOffset/(document.body.clientHeight - window.innerHeight)) +'deg)'}); 
  });

});

Icon is rotated from 0 to 180 as you progress toward the end of the page, and back to zero as you go back.