Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- pageScroll - Панель информации
DEMO
+
Всем привет. Сегодня у нас небольшой скрипт который добавит панель информации на вашем сайте а именно процент пролистования страницы от 0 до 100%. Оформить можно в виде полосы либо в виде добавления инициалов сайта как и в нашем варианте.
Установка:
1. Добавим HTML:
2. Добавим js код:
3. Добавим Css:
P.s В CSS находим Best Studio и меняем на свои инициалы сайта. CSS использует инверсию цвета текста в зависимости от фона.
Установка:
1. Добавим HTML:
Код
<div id="pageScroll"><span></span></div>
2. Добавим js код:
Код
$(window).on('scroll',function() {
sS = $(window).scrollTop();
fF = $(document).height()-$(window).height();
dD=sS/fF*100;
Scroll=Math.round(dD);
$('div#pageScroll span').css({width: ''+Scroll+'%'});
});
sS = $(window).scrollTop();
fF = $(document).height()-$(window).height();
dD=sS/fF*100;
Scroll=Math.round(dD);
$('div#pageScroll span').css({width: ''+Scroll+'%'});
});
3. Добавим Css:
Код
#pageScroll {position:fixed;
background: #fff;top:0px;
color: #fff;width: 100%;
font-family: sans-serif;
padding: 19px 0px;
}
div#pageScroll span {
width: 0%;
background: #3807f3;
position:absolute;
padding: 0px 0px;
top: 0px;
left: 0px;
font-size: 16px;
}
div#pageScroll span:after {
color: #fff;
mix-blend-mode: difference;
content: "Best Studio";
display: block;
padding: 11px 15px;
margin: 0px;
width: 100px;
font-weight: bold;
font-family: sans-serif;
font-size: 14px;
}
background: #fff;top:0px;
color: #fff;width: 100%;
font-family: sans-serif;
padding: 19px 0px;
}
div#pageScroll span {
width: 0%;
background: #3807f3;
position:absolute;
padding: 0px 0px;
top: 0px;
left: 0px;
font-size: 16px;
}
div#pageScroll span:after {
color: #fff;
mix-blend-mode: difference;
content: "Best Studio";
display: block;
padding: 11px 15px;
margin: 0px;
width: 100px;
font-weight: bold;
font-family: sans-serif;
font-size: 14px;
}
P.s В CSS находим Best Studio и меняем на свои инициалы сайта. CSS использует инверсию цвета текста в зависимости от фона.
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Добавил: Best_Studio
Дата добавления: 06.04.2018 в 22:47 по МСК
Категория: Другие модули
Просмотров: 636
Комментариев: 0
Эмоций:
Дата добавления: 06.04.2018 в 22:47 по МСК
Категория: Другие модули
Просмотров: 636
Комментариев: 0
Эмоций:
Теги: