Непонятное поведение скрипта

[eucalipt]

Я правильно понимаю работу предоставленного скрипта? Поправьте меня в случае чего, пожалуйста.
Описывал в комментариях.

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?

[danik.js]

Альтернатива body onscroll

Честно говоря, не знаю на че правильно вешать - на body или window. В хроме событие всплывает с элемента document.

с параметром 'e'

Ну он нам не понадобился, можно его и не указывать.

И если страница не прокручивается (?)

Наверно неудачное имя флага придумал. Смысл его: "скролл страницы больше 10 пикселей обработан". Или "шапку уже уменьшили".

шапка уменьшена = ложь
..
если (скролл > 10) {
    если (это неправда, что шапка уменьшена) {
      уменьшаем шапку;
      шапка уменьшена = правда
  }
} иначе {
    если (шапка уменьшена) {
        возвращаем шапку;
        шапка уменьшена = ложь
    }
}

Таким образом, мы не пытаемся уменьшить шапку если она уже уменьшена. А в твоем скрипте такой косяк есть.

И, как я понимаю, все анимация происходит при помощи css?

Да. Все современные браузеры, IE10+, аппаратное ускорение в большинстве случаев (правда не в случае height/width, насколько я знаю).
Чтоб увеличить охват старых браузеров, css3 свойства нужно продублировать с вендорными префиксами (-webkit, -moz и тд)

[eucalipt]

Вот он, вот он профессионал. Объяснил про флаг так четко, что я сам кому хочешь теперь объясню. Если бы можно было апнуть карму 10 раз, апнул бы 11.

Но а если насчет решения, то я их совместил

$(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;
				
			}
			
		}
		
	}
});

[eucalipt]

Еще раз огромное спасибо! Настоящий профессионал!

[danik.js]

я их совместил

Лучше бы не совмещал
window.onscroll - это (обязательно)
document.getElementById('header') - и это (оно у я и не юзается)
вернуть на функции jQuery.

Так а че, не устраивает что в убогом IE8-9 не будет анимации? Уж не знаю что лучше - дерганная тормозная анимация или резкая, но без лагов, смена.

[eucalipt]

Да, строчку с header'ом просто убрать забыл.

Как по мне, так я под осла подстраиваться не собираюсь. Пусть лучше тормоза, поддерживающие то, что уже давно должно быть мертво, переседают на новый софт, чем я буду верстать убожину. Дизайн не должен страдать из за тупого юзверя.