Делаем подмену 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; }
