Прозрачная шапка

Проверенный
34 сообщения

Отправлено 28.05.2016 - 19:01

Хотел бы узнать как можно сделать , чтобы шапка сайта, а точнее меню при прокрутки в низ становилась чуть прозрачно? Т.е Моя шапка при отпуске в низ обычная темная, а как сделать , чтобы стала чуть прозрачной ?

Я уже обязан этому сайту, вас к себе как Партнер поставлю =))

Snoopak 2

Администратор
183 сообщения

Отправлено 30.05.2016 - 15:02

Этот js запихни в head либо в какой-то глобальный блок, который присутствует на всех страницах:

Код

$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.header').addClass("opacity");
}
else{
$('.header').removeClass("opacity");
}
});

header - это класс шапки
А вот это в CSS:

Код

.scroll_opacity {
opacity: 0.6;
transition: all 0.4s ease;
}

TatJIust 3

Проверенный
34 сообщения

Отправлено 31.05.2016 - 16:24

Что-то не вышло

Snoopak 4

Администратор
183 сообщения

Отправлено 31.05.2016 - 20:18

Ой, я забыл в скрипте класс для прозрачности сменить wacko
В js скрипте замени opacity на scroll_opacity

TatJIust 5

Проверенный
34 сообщения

Отправлено 04.06.2016 - 10:56

Snoopak, Что-то не вышло, вроде все правильно сделал

Snoopak 6

Администратор
183 сообщения

Отправлено 04.06.2016 - 11:26

В скрипте upcode.ucoz.net/js/head.js замени

Код

$('.header').addClass("opacity");

на

Код

$('.header').addClass("scroll_opacity");

TatJIust 7

Проверенный
34 сообщения

Отправлено 04.06.2016 - 17:21

Snoopak, Вот, вроде получилось, но она стала вся прозрачной, т.е
На самом верху она должна быть темной, а при скроле(Отпуске в низ) становится прозрачной .

Snoopak 8

Администратор
183 сообщения

Отправлено 05.06.2016 - 08:22

В файле head.js замени все содержимое на это:

Код

$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.header').addClass("scroll_opacity");
}
else{
$('.header').removeClass("scroll_opacity");
}
});

И все будет как надо)

TatJIust 9

Проверенный
34 сообщения

Отправлено 05.06.2016 - 10:53

Snoopak, О спасибо большое! Можно закрыть тему =)