根據窗口滾動和div的最小高度調整div的大小

Question

我正在努力實現這一目標：

當用戶滾動頁面時，我需要一個固定的標題，但在粘貼它之前，此div應該縮小到一定的高度，然后此div變得固定。

這是我的嘗試

如您所見，收縮時有一些奇怪的行為，我認為我的方法不太正確。

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