Изменение высоты меню при прокрутке

Question

Я хочу для своего сайта, когда прокручиваю вниз, чтобы свести к минимуму высоту меню. Например, мой заголовок имеет фиксированный верх с высотой: 150 пикселей. И когда я прокручиваю вниз, я хочу изменить размер с высотой: 50 пикселей.

Я использую самозагрузки 3. Таким образом, класс моего заголовка .navbar .navbar-fixed-top .

Можете ли вы сказать, как я могу это сделать?

Answer 1

Это простое решение для jQuery.

$(window).scroll(function (event) { 
     var y = $(this).scrollTop(); //set position from top when to change style in pixels 
     if (y >= 300) { 
      $('#header').addClass('resized'); 
     } else { 
      $('#header').removeClass('resized'); 
     } 
    }); 

CSS:

.resized { 
    height:50px !important; 
} 

JSFiddle