Непонятное поведение скрипта
Здравствуйте. С сегодняшнего дня я открыл для себя некоторые прелести Jquery, хотя раньше был яростным его противником. Оказалось намного удобнее.
У меня есть header (его id="header"), в этом хедере - 2 section. Левая - это лого сайта, а в правом содержатся 2 div'a, каждый из которых является кнопкой. В чем суть проблемы: в теге body есть биъэйвиор onscroll, при котором включается функция changeHeader()
function changeHeader() {
if ($(document).scrollTop() > 10) {
$("#header").animate({ // Анимируем сам хедер
lineHeight: "64px",
backgroundColor: "rgba(255, 255, 255, 1)"
}, 100);
$("div.logo span").animate({ // Анимируем Logo
color: "rgba(39, 135, 164, 1)"
}, 100);
$("#header section div.sign").animate({ // Анимируем sign up
borderColor: "#cccccc",
color: "#999999"
}, 100);
} else {
$("#header").animate({ // Анимируем сам хедер
lineHeight: "100px",
backgroundColor: "rgba(255, 255, 255, 0)"
}, 100);
}
}
Как вы можете видеть из кода, при прокрутке страницы больше чем на 10, происходят некоторые изменения в стилизации элементов. Но почему-то если долго крутить страницу вниз, то изменения именно только (!) кнопок Sign Up и Sign In происходят только после окончания прокрутки. Остальные элементы меняют стиль сразу после того, как значение прокрутки становится больше 10. А когда же мы крутим страницу вверх, и когда выполняется условие else, то есть когда значение прокрутки становится меньше 10, то, пока мы все еще кротим колесико, изменение стиля #header не происходит опять же до полной остановки прокрутки колесика. Если при прокрутке вниз пользоваться скроллбаром, то изменения кнопок авторизации не вступят в силу, пока я не отпущу скроллбар. Как решить эту проблему? |
Хотелось бы запустить ВСК эти анимации одновременно, что бы все сработали одновременно, сразу же после того, как значение прокрутки стало больше 10.
|
Цитата:
|
Но ведь вам известно решение
Но ведь вы знаете, как исправить проблему?
|
<!DOCTYPE html><style>
.header{
height: 80px;
background: red;
transition: all 0.3s;
position: fixed;
left: 0;
right: 0;
}
.header.compact{
height: 40px;
background: blue;
}
</style>
<header class="header" id="header">
</header>
<main style="height:800px"></main>
<script>
var header = document.getElementById('header');
var scrolled = false;
window.onscroll = function(e) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > 10) {
if (!scrolled) {
header.className += ' compact';
scrolled = true;
}
} else {
if (scrolled) {
header.className = header.className.replace('compact', '');
scrolled = false;
}
}
};
</script>
|
Флаг scrolled добавлен для исключения лишних обращений к DOM. Это важно в обработчике onscroll. И не важно юзаешь ты jQuery или нет. Даже наоборот - с привычным бестолковым стилем кода под jQuery это втройне важно.
|
Цитата:
|
И, кстати, этого так просто не сделаешь, я уверен, что вы даже до конца тему не дочитали. У меня изменения должны происходить только при определенных значениях прокрутки, что на чистом CSS3 не сделаешь. Это вам не просто :hover, не так-то все просто здесь.
|
буду разбираться, спасибо большое. Тему не закрываю пока что, можно буду обращаться к вам сюда с вопросами?
|
eucalipt, смотри пример, жми кнопку Посмотреть. Как видишь там js-код. Никто и не говорил что без него можно обойтись.
|
| Часовой пояс GMT +3, время: 13:50. |