Question

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

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

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

滚动位置：435
div高度：100px (=minimum height)

以下是快速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 的

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

1 个答案: