javascript - 使用 jQuery 滚动时动态调整 div 的大小

Question

我正在为我的固定 header 寻找 jQuery 解决方案。如果用户向下滚动，标题将以与滚动位置相同的方式收缩，直到达到最小高度。

示例:
滚动位置:0
div 高度:250px

滚动位置:85
div 高度:165px (=250px-85)

滚动位置:435
div 高度:100px(=最小高度)

这是快速 fiddle .

body {
    height: 1000px;
}

.header {
    position: fixed;
    background-color: lightblue;
    height: 250px;
    width: 100%;
}

<div class="header"></div>

---

这是我的解决方案:fiddle

Answer 1

您可以使用 Window Scroll Event 的组合和 scrollTop() 函数来实现同样的效果。

$(window).scroll(function(){
    var distanceFromTop = $(document).scrollTop();
    if(distanceFromTop < 84 )
    {
        // set div height to 250px
    }   
    else if(distanceFromTop == 85)
    {
        // reduce the div height
    }
    else if(distanceFromTop > 85 && distanceFromTop <= 434)
    {
        // do something with height if required
    }
    else if(distanceFromTop > 434)
    {
        // set div height to 100px
    }   
});

DEMO