Изменение размера DIV в соответствии с окном прокрутки и ДИВОЙ мин высоты

Question

Я пытаюсь добиться этого:

Когда прокручивать страницу, я нужен заголовок, который будет зафиксирован, но прежде, чем придерживаться его, этого DIV должен сжиматься до определенной высоты, и после этого этот div фиксируется.

This is my attempt

Как вы можете видеть, есть какое-то странное поведение при сужении, я думаю, что мой подход не так хорошо.

header.css("height", "-=" + (Math.abs(start - scrollTop))); 
spacer.css("height", "-=" + (Math.abs(start - scrollTop))); 

Итак, что является лучшим способом сделать это?

UPDATE:

Сейчас я нахожусь в данный момент, но мне нужно, чтобы сделать ее более гладкой

jsFiddle

Answer 1

Попробуйте

$(document).ready(function(){ 

    var headerElement = //Select header element here, 
     scrollTopToLookoutFor = //Put value you want to check for here, 

    if($("body").scrollTop() > scrollTopToLookoutFor || $("html").scrollTop() > scrollTopToLookoutFor){ 
       headerElement.addClass("fix-header"); 
    } 
      else{ 
       headerElement.removeClass("fix-header"); 
      } 

}); 

есть класс CSS здесь с обязательными стилями

.fix-header{ 
    height: 400px; 
    position: fixed; 
    top: 0px; 
}