Подмена Css при скролле страницы сайта...

Подмена Css при скролле страницы сайта...
Делаем подмену CSS кода при определенном скролле страницы сайта...

Установка:
1. Создаем 2 СSS файла с названием style1 и style2.
2. Меняем CSS в место родного на style1 и все.
3. Для изменения данных на странице при скролле переписываем нужные нам теги в style2.

Куда угодно:

Code

<script type="text/javascript">
var active = true;
var maxHeight = 500; // через сколько пикселей в низ подменять файл ксс
var linkCss = 'style'; //путь к файлу ксс без указания номера и расширения
window.addEventListener('scroll', function () {  
  var y = window.event ? document.body.scrollTop : document.html.scrollTop;
  var c = String(linkCss + parseInt((y < maxHeight) ? '1' : '2') + '.css');
  var l = document.head.getElementsByTagName('link');
  if (active == true && l[l.length-1].href != c) {
  l[l.length-1].parentNode.removeChild(l[l.length-1]);
  active = false;
  var css = document.createElement('link');
  css.setAttribute('type', 'text/css');
  css.setAttribute('rel', 'styleSheet');
  css.setAttribute('href', c);
  document.head.appendChild(css);
  } else active = true;
}, false);
</script>


CSS 1
Code

BODY {background: #FFFFFF}
  A:link {color: #80FF00}
  A:visited {color: #FF00FF}
  H1 {font-size: 24pt; font-family: arial}
  H2 {font-size: 18pt; font-family: arial}
  H3 {font-size: 14pt; font-family: arial}
  img { width:350px; }


CSS 2
Code

BODY {background: #FFFFFF}
  A:link {color: #80FF00}
  A:visited {color: #FF00FF}
  H1 {font-size: 24pt; font-family: arial}
  H2 {font-size: 18pt; font-family: arial}
  H3 {font-size: 14pt; font-family: arial}
  img { width:500px; }
Скачать файлы