Question

我有一个HTML类导航，初始高度为 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'
       });
    }
});

如果我按键盘向下箭头键两次，导航类从原始高度移至最小高度，如果向上箭头键按两次导航类从最小高度移动到原始高度但是我想让卷轴更加平滑（例如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

上进行测试

Answer 2

           $(document).scroll(function() {
                if($(this).scrollTop()>100) {
                    $('.selector').addClass('scrolled');
                }
                if($(this).scrollTop()<40) {
                    $('.selector').removeClass('scrolled');
                }
            });

如何使用jQuery滚动来更改元素的高度？

2 个答案: