Вопрос поставлен не чётко. но сама суть реализации такова: при скролле до определённого расстояния добавляем класс шапке, а у этого класса стили другие + transition для плавности
Если не хотите заморачиваться с js то
вот плагин
Пользоваться так
(function($){
$(window).load(function() {
$('body').libriscrollpage({
element: $('.b-header')
});
});
})(jQuery);
Плагин присваиваем элементу к которому нужно добавлять классы и удалять
В опции element находится элемент который меняет положение относительно верха (в данном случае шапка)
Если Вам нужно шапке присвоить класс и её же отслеживать (как в примере Вашем) то element указывать не нужно, просто инициализируете плагин
Далее к элементу что присвоили плагин нужно добавить дата атрибуты
data-offset-top - должен содержать расстояние в пикселях или название класса элемента при скролее до которого переключаются заданные классы
data-remove-class - должен содержать класс который нужно добавить при скролле до заданного расстояния (если не задавать, то по умолчанию 'active')
data-remove-class - должен содержать класс который нужно удалить при скролле на заданное расстояние (если не задавать, то по умолчанию 'noActive')
Будут проблемы пишите