Непонятное поведение скрипта
Здравствуйте. С сегодняшнего дня я открыл для себя некоторые прелести 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-код. Никто и не говорил что без него можно обойтись.
|
Я правильно понимаю работу предоставленного скрипта? Поправьте меня в случае чего, пожалуйста.
Описывал в комментариях.
var header = document.getElementById('header'); // Получаем id элемента и записываем его в переменную header
var scrolled = false; // Как Вы писали, это флаг, он помогает снизить нагрузку на DOM страницы
window.onscroll = function(e) { // Тут мы определяем, прокручивается ли окно (Альтернатива body onscroll=('..')?) и если
// прокручивается, то запускаем анонимную функцию с параметром 'e'
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // Переменная получает значение прокрутки
if (scrollTop > 10) { // Если значение прокрутки больше 10
if (!scrolled) { // И если страница не прокручивается (?)
header.className += ' compact'; // То к названию класса элемента с id header прикручиваем compact
scrolled = true; // Тут непонятно (*)
}
} else { // Если мы вернулись в начало страницы
if (scrolled) { // Если страница прокручивается (почему тут прокручивается, а там не прокручивается?)
header.className = header.className.replace('compact', ''); // Удаляем compact из названия класса
scrolled = false; // И тут непонятно (*2)
}
}
}; // И, как я понимаю, все анимация происходит при помощи css?
|
Цитата:
Цитата:
Цитата:
шапка уменьшена = ложь
..
если (скролл > 10) {
если (это неправда, что шапка уменьшена) {
уменьшаем шапку;
шапка уменьшена = правда
}
} иначе {
если (шапка уменьшена) {
возвращаем шапку;
шапка уменьшена = ложь
}
}
Таким образом, мы не пытаемся уменьшить шапку если она уже уменьшена. А в твоем скрипте такой косяк есть. Цитата:
Чтоб увеличить охват старых браузеров, css3 свойства нужно продублировать с вендорными префиксами (-webkit, -moz и тд) |
Вот он, вот он профессионал. Объяснил про флаг так четко, что я сам кому хочешь теперь объясню. Если бы можно было апнуть карму 10 раз, апнул бы 11.
Но а если насчет решения, то я их совместил :D
$(function changeHeader() {
var header = document.getElementById('header');
var scrolled = false;
window.onscroll = function(e) {
if ($(document).scrollTop() > 10) {
if (!scrolled) {
$("#header").animate({ // Меняем Header
lineHeight: "64px",
backgroundColor: "#ffffff"
}, {"duration":100, "queue":false});
$("#header section div.logo span").animate({ // Меняем Logo
color: "#CD0000"
}, {"duration":100, "queue":false});
$("#header section div.sign").animate({ // Меняем Sign Up и Sign In
color: "#999999",
borderColor: "#2787a4"
}, {"duration":100, "queue":false});
scrolled = true;
}
} else {
if (scrolled) {
$("#header").animate({ // Меняем Header
lineHeight: "100px",
backgroundColor: "rgba(255, 255, 255, 0)",
}, {"duration":100, "queue":false});
$("#header section div.logo span").animate({ // Меняем Logo
color: "#ffffff"
}, {"duration":100, "queue":false});
$("#header section div.sign").animate({ // Меняем Sign Up и Sign In
color: "#999999",
borderColor: "#cccccc"
}, {"duration":100, "queue":false});
scrolled = false;
}
}
}
});
|
Еще раз огромное спасибо! Настоящий профессионал!
|
Цитата:
window.onscroll - это (обязательно) document.getElementById('header') - и это (оно у я и не юзается) вернуть на функции jQuery. Так а че, не устраивает что в убогом IE8-9 не будет анимации? Уж не знаю что лучше - дерганная тормозная анимация или резкая, но без лагов, смена. |
Да, строчку с header'ом просто убрать забыл.
Как по мне, так я под осла подстраиваться не собираюсь. Пусть лучше тормоза, поддерживающие то, что уже давно должно быть мертво, переседают на новый софт, чем я буду верстать убожину. Дизайн не должен страдать из за тупого юзверя. |
| Часовой пояс GMT +3, время: 16:03. |