jQuery Scroll Position while Resizing Demo

HTML

<header>
  <h1>Correct Browser Scroll Position While Resizing</h1>
  <h2>by <a href="https://twitter.com/#!/thejameskyle/" target="_blank">James Kyle</a></h2>
  <p>Browsers do not keep a consistent scroll position while resizing, this can get really annoying (especially when working with lots of monotonous data). A fix to this would be by using scroll percentages instead of pixels scrolled. This doesn't work perfectly,
    but it does a much better job.</p>
</header>

<h1 data-num="1"></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula ante sit amet turpis hendrerit hendrerit. Vestibulum in pulvinar neque. Praesent congue tincidunt nunc et venenatis. Etiam vel purus ut nibh rutrum ullamcorper. Proin viverra diam
  at elit tincidunt accumsan. Suspendisse fermentum, enim at volutpat aliquet, libero massa bibendum sem, sed suscipit orci velit vel est. Donec iaculis, dolor quis consectetur sagittis, metus nunc congue ipsum, non rhoncus felis eros quis arcu. Sed non
  fermentum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu vel sapien mattis ultrices.</p>

<h1 data-num="2"></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula ante sit amet turpis hendrerit hendrerit. Vestibulum in pulvinar neque. Praesent congue tincidunt nunc et venenatis. Etiam vel purus ut nibh rutrum ullamcorper. Proin viverra diam
  at elit tincidunt accumsan. Suspendisse fermentum, enim at volutpat aliquet, libero massa bibendum sem, sed suscipit orci velit vel est. Donec iaculis, dolor quis consectetur sagittis, metus nunc congue ipsum, non rhoncus felis eros quis arcu. Sed non
  fermentum nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet arcu vel sapien mattis ultrices.</p>

<h1 data-num="3"></h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula ante sit amet turpis hendrerit hendrerit. Vestibulum in pulvinar neque. Praesent congue tincidunt nunc et...

CSS

html {
  font-size: 80%;
}

body {
  width: 80%;
  max-width: 1000px;
  min-width: 280px;
  margin: 5% auto;
  padding: 20px;
  font: 1em/1.4em "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header {
  font-size: 1.4em;
  line-height: 1.4em;
  margin-bottom: 5%;
}

footer {
  margin-top: 8%;
  font-size: 1.2em;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  line-height: 1.1em;
  margin: 0.5em 0;
}

h1:before,
h1:after {
  content: attr(data-num)
}

h1:after {
  display: block;
  position: relative;
  z-index: -1;
  height: 0;
  width: 1em;
  top: -0.2em;
  left: -0.5em;
  font-size: 5em;
  text-align: center;
  letter-spacing: -0.1em;
  opacity: 0.1;
}

h2 {
  font-size: 1.2em;
}

h1+h2 {
  margin-top: -0.6em;
  margin-bottom: 1em;
}

p {
  margin: 0.5em 0;
}

a {
  color: #36C;
  text-decoration: none
}

a:hover {
  text-decoration: underline
}

div.switch {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 20px;
  background: white;
  border-radius: 3px 0 0 0;
  box-shadow: rgba(0, 0, 0, 0.1) 20px 20px 30px 20px, rgba(0, 0, 0, 0.15) 3px 3px 6px 3px, rgba(0, 0, 0, 0.4) 0 0 1px;
}

input[type=checkbox] {
  margin: 0 0 0 5px;
  padding: 0;
  background: #36c;
}

label {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  cursor: pointer;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
}

JavaScript

(function() {

  var html = $('html'),
    H = html.outerWidth(true),
    S = $(window).scrollLeft(),
    P = S / H,
    toggle = $('input#toggle');

  $(window).scroll(function() {
    S = $(window).scrollLeft();
    P = S / H;
  });

  $(window).resize(function() {
    if (toggle.is(':checked')) {
      H = html.outerWidth(true);
      $(window).scrollLeft(P * H);
    }
  });

  toggle.change(function() {
    H = html.outerHeight(true);
    S = $(window).scrollTop();
    P = S / H;
  });

})();