Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Подмена 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; }


Демо версия: uLink

Автор: UberCHEL
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

При копировании материала указываем источник ucods.3dn.ru

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Скачать файл 1.2 Kb
Поделиться новостью в социальной сети.
Имя файла:
Размер: 1.2 Kb
Добавил: Best_Studio
Дата добавления: 15.04.2012 в 19:02 по МСК
Категория: Другие модули
Скачиваний: 596
Просмотров: 3562
Комментариев: 6
Эмоций:
  • Оценки читателей

    ЗАКРЫТЬ
    • 0 Лайк
    • 0 Лавки
    • 0 Ахахах!
    • 0 Ого!
    • 0 Восторг
    • 0 Печаль
    • 0 Грусняшь

Теги: css, ucoz, Replace, html
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Web41k
08.08.2012 | # |№6
Кода дохера, можно было и покороче сделать. :|

Best_Studio
30.04.2012 | # |№5
Причем тут исходный код. Кто пользуется VK то видел уже подобное в действие (т.е убирает ненужное и концентрует внимание на нужном)

demon31
30.04.2012 | # |№4
Я так понимаю если кто то исходный код страницы решит посмотреть то он увидит подмену а не орегинал? Но толку это только для 2 % людей сработает остальные просто по ссылке исходика перейдут и все.

Web41k
19.04.2012 | # |№3
Ты меня пугаешь biggrin

Best_Studio
18.04.2012 | # |№2
Со временем все поймете...

Web41k
18.04.2012 | # |№1
А смысл? O_o