Здравствуйте. С сегодняшнего дня я открыл для себя некоторые прелести 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 не происходит опять же до полной остановки прокрутки колесика.
Если при прокрутке вниз пользоваться скроллбаром, то изменения кнопок авторизации не вступят в силу, пока я не отпущу скроллбар.
Как решить эту проблему?