Как изменить шапку при скроллинге?

Код шапки - jsbin.com/nedoqobiyu/edit?html,css,js,output - чтоб правильно увидеть окно браузера, растяните часть jsbinA аутпут до 790+ пикселей. Шапка уже зафиксирована.

Нужно чтоб при прокрутке страницы на 50-200 пикселей - шапка выстраивалась в ряд и делалась естественно меньше (например: шрифт меню с 18пкс на 11-12 пикс., так же и логотип в размерах уменьшался.), а когда она в топе - становилась в теперешний вариант. Шапка адаптивная под моб. устройства с мобильным меню.

Подойдут любые решения. Не доходит до меня, как это сделать.

Пробывал такие варианты:

$(window).scroll(function(){
        var scrolled = $(this).scrollTop();
        if( scrolled >= 107 ) {
            $('.main-navigation a').addClass('КЛАСС с изменениями');
        }   
        if( scrolled <= 107 ) {     
            $('.main-navigation a').removeClass('КЛАСС с изменениями');
        }
    });


не выходит ничего не меняет.

window.onscroll = function(){
	 var html = document.documentElement, body = document.body;
	 var BlkStyle = document.getElementById('block').style; /*--тут искал и бай КлассНаме, и икспас...---*/
	 if(html.scrollTop>49||body.scrollTop>49) { //alert()
	     BlkStyle.borderColor="blue";
	     BlkStyle.height="34px";
	 } else BlkStyle.height=BlkStyle.borderColor="";
}
  • Вопрос задан
  • 10483 просмотра
Решения вопроса 2
Ibraguim
@Ibraguim
Ответ написан
Комментировать
IonDen
@IonDen
JavaScript developer. IonDen.com
Все прекрасно работает: jsfiddle.net/IonDen/h4ahwzhe
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы