根据窗口滚动和div最小高度调整div的大小

Question

我正在努力实现这个目标：

当用户滚动页面时，我需要一个将被修复的标题，但在坚持之前，这个div应该缩小到一定的高度，之后这个div就会被修复。

This is my attempt

正如你所看到的，萎缩有一些奇怪的行为，我认为我的做法并不是那么正确。

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

那么，最好的方法是什么？

更新：

现在我正处于这一点，但我需要让它更加顺畅

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;
}