Подмена Css при скролле страницы сайта
Добавлено 23.05.2015 в 21:49
Подмена Css при скролле страницы сайта
Делаем подмену CSS кода при определенном скролле страницы сайта.

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

В head ставим

Код

  <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

Код

  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

Код

  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; }  
   
  


Установка завершена!
Автор скрипта: UberCHEL
К материалу оставили 4 комментария
France
Marsselle France @France
13
02.10.2015 в 14:38 - Пятница
демо не работает 19
-D-I-N-I-S-
Иван Иванов @-D-I-N-I-S-
2
02.10.2015 в 16:33 - Пятница
France, у меня всё работает, проверил. В демо-примере при прокрутке вниз картинка становится больше
МаксВласов
Макс Власов @МаксВласов
118
31.08.2016 в 01:03 - Среда
Да уж, ну и картинки в демо у вас 3
-D-I-N-I-S-
Динис Хакимов @-D-I-N-I-S-
2
31.08.2016 в 13:58 - Среда
МаксВласов, 4 в источнике так было))