javascript - 如何使用 jQuery scroll 改变元素的高度？

Question

我有一个 HTML 类 navigation，其初始高度为 100px，min-height 为 40px。我想根据滚动更改类的高度(如果向下滚动则大小会减小，如果向上滚动则大小会增加)。我使用以下代码并且运行良好。

$(window).scroll( function() {
    if( $('.navigation').offset().top > 50 )
    {
        $('.navigation').css({
           'height' : '40px',
           'background' : 'rgba(37, 37, 37, 0.9)'
        });
    } else {
       $('.navigation').css({
         'height' : '100px',
         'background' : '#b24926'
       });
    }
});  

如果我按键盘向下箭头键两次，导航类从原始高度移动到最小高度，如果向上箭头键按两次 navigation 类从最小高度移动到原始高度。
但我想让滚动更平滑(比如 4-5 向上或向下按键从一个高度到达另一个高度)。

例如:初始高度为:100px，最小高度为30px。现在:如果按下向下箭头键/鼠标滚轮向下移动一次，则高度将为 85px，如果再次按下向下箭头键，高度将为 70px，依此类推。这意味着每按下一个向下箭头键/鼠标滚轮向下移动，高度将减少 15-20px，每按下一个向上箭头键/鼠标滚轮向上移动，高度将增加 15-20px。

谁能告诉我该怎么做(不使用第三方 API)。

• 谢谢

Answer 1

您可以使用简单的百分比计算来更新高度

var limitForMinimalHeight = 400; //after this distance navigation will be minimal height
var maxHeight = 100;
var minHeight = 40;
$(window).scroll( function() {
    var screenTop = $(document).scrollTop();
    var achievedDistancePercent =  Math.min(screenTop*100/limitForMinimalHeight, 100);
    var amounToAdd = ((maxHeight - minHeight) * (100 - achievedDistancePercent))/100;
    var newHeight = minHeight + amounToAdd;
    $('.navigation').height(newHeight);        
});

您可以在 JSFiddle 上进行测试