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

Question

I have a HTML class navigation with the initial height of 100px and min-height is 40px . I want to change the height of the class, based on the scroll (if scroll down than size will decrease and if scroll up than size will increase). I use the following code and it's working perfectly.

$(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'
       });
    }
});  

If I press the keyboard down arrow key two times than navigation class moved from original height to minimum height and if the up arrow key press two times than navigation class moved from minimum height to original height.
But I want to make the scroll more smooth (like 4-5 up or down key presses to reach from one height to another).

For example: initial height is: 100px and minimum height is 30px. Now: if down arrow key is pressed/mouse wheel is move down one time than height will be 85px, if again down arrow is pressed height will be 70px and so on. That means for each down arrow key is pressed/mouse wheel is move down than height will decrease by 15-20px and for each up arrow key is pressed/mouse wheel is move up, height will increase by 15-20px.

Can anyone tell me how can I do that (without using third party api).

• Thanks

Answer 1

You can use simple percent calculation to update height

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

You can test it on JSFiddle

Answer 2

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