Как сделать такое адаптивное меню?

Question

[Cosmonaut .]

Здравствуйте!
Помогите пожалуйста, хочу сделать такое адаптивное меню.
Когда сделаю сколлринг при этом меняется фон, цвет шрифта и.т.д.
Посмотрите как рабоает
Обычный вариант:

После сколлинга:


Заранее спасибо.

Answer 1

[rinatoptimus]

Вот напильничком подпилите немного и должно устроить jsfiddle.net/dtZDZ

Comments

[rinatoptimus]

Немного поправил:

<div class="nav">
    Change color on scroll
  </div>

body {
    height:2000px;
    background-color: #808080;
}
.nav {
  width: 100%;
  height: 40px;
  position: fixed;
  background-color: green;
  border: 1px solid #000;
}

$(document).ready(function(){
    $(document).scroll(function() {
        var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
        if(alpha != 0.5) {
        	$(".nav").css('background-color', 'transparent');
        } else {
        	$(".nav").css('background-color', 'green');
        }
        //var channel = Math.round(alpha * 255);
        console.log(alpha);
        //$(".nav").css('background-color', 'transparent');
    });
});

[Cosmonaut .]

rinatoptimus, попробовал но работает не корректо.
Кстати вот вам пример посмотрите

[rinatoptimus]

А вот так: jsfiddle.net/634d6vgq/2 ?

Answer 2

[Артур Карапетян]

JS:
$(window).on("scroll", function() {
if($(window).scrollTop() > 50) {
$(".header").addClass("active");
$('header.masthead').addClass('scrolled')
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".header").removeClass("active");
$('header.masthead').removeClass('scrolled')
}
});
И в CSS:
header.masthead.scrolled {
// стили, которые должны быть при скролле
}