Scroll till element is centered in viewport then add class

<script type="text/javascript">
// Scroll bar Process Page
var elementPosition = jQuery('#stepNumber').offset();

jQuery(window).scroll(function () {
    if(jQuery(window).scrollTop() > 400) {
        jQuery('#stepNumber').addClass('fixed-number');
    } else {
        jQuery('#stepNumber').removeClass('fixed-number');
    }
  });
</script>