Код шапки -
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="";
}
