Hello, I've added a simple parallax scroll to my site header. It works fine, but I'd like to rewrite with better code. Also, I need to set the background position on reload in case the page was scrolled before a refresh and I'm lost.

The way it works now is that there is a 350px tall header with a background. The background scroll is slowed with jquery using a variable in a data attribute (but could be hard coded as well). At 140px the header, and it's background, stop scrolling and become position fixed.

Here's my current code:
Code:
$(function () {
	var $window = $(window);
    var $header = $('header'); // assigning the object
        
    $(window).scroll(function() {
		if ($window.scrollTop()<210) {
		var yPos = -($window.scrollTop() / $header.data('speed')); };
		 // Put together our final background position
		var coords = '50% '+ yPos + 'px';
		// Move the background
		$header.css({ backgroundPosition: coords });
    });
});    

$(function () {  
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    if (y >= 210) {
      // if so, add the fixed class
      $('header').addClass('fixed');
    } else {
      // otherwise remove it
      $('header').removeClass('fixed');
    }
  });
});
Thanks for any help.