If statement seems to fail even though it prints a contradictory message

  <script src="jquery-3.3.1.js"></script>
  <script src="jquery.hotkeys.js"></script>
  <script>

    $(document).ready(function(){
      $(document).on("keydown", null, "down", function(){
        var leftPaddleRef = document.getElementById('leftPaddle');
        if (leftPaddleRef.style.top >= "100") {
          alert(leftPaddleRef.style.top);
        }
        else{
          $("#leftPaddle").animate({
            top: "+=3%"
          },
            "fast"
          );
        }
      });
    });

  </script>

^ This ^ is my script. "leftPaddle" is the left paddle in a game of pong, its a div with a "top" value of 50% to set it halfway down the page, and I want it to move downwards when the down key is pressed until the top value reaches 100%. The "alert(leftPaddleRef.style.top);" is only in there for troubleshooting purposes.

The problem with the overall program is that the second time I press the down key the if statement fails and prints "53.00001%" or something with a similar number of decimal places if that matters. What I'm wondering is why on earth the if statement fails if the value is only 53%. Can anyone help me?