javascript - 增加/减少滚动上的元素填充

Question

我正在尝试根据页面的滚动位置更改元素的填充；当用户向下滚动页面时，填充会增加，而当他们向上滚动时，填充会减少。

我的主要问题是滚动不是很流畅，有时如果我滚动到页面顶部太快，每次元素的填充大小都不一样。我的目标是设置最小和最大填充量，因此滚动本质上是两种尺寸之间的过渡。谁能看出我哪里出错了？

到目前为止，这是我的 jQuery:

$(window).scroll(function(){
    var h = 45;    
    if($(window).scrollTop() < 200){
        $(".header").css({
            'paddingTop': h-$(window).scrollTop() + "px",
            'paddingBottom': h-$(window).scrollTop() + "px"
        });
    }
});

这是我的 jsfiddle:http://jsfiddle.net/JDE8h/3/

Answer 1

给你:

JavaScript:

var _window = $(window),
    header = $('.header'),
    max = 50,
    padding = parseFloat(header.css('padding-top')),
    currentPadding = padding,
    scrollPos = _window.scrollTop();

_window.scroll(function() {  

    if (scrollPos < _window.scrollTop() && currentPadding < max) {
        header.css('padding', ++currentPadding + 'px 0');
    } else if (scrollPos > _window.scrollTop() && currentPadding > padding) {
        header.css('padding', --currentPadding + 'px 0');
    }

    if (_window.scrollTop() == 0)
        header.css('padding', padding + 'px 0');

    scrollPos = _window.scrollTop();
});

并将 CSS transition 属性添加到 .header:

.header{
    /* other CSS declarations ...*/
    -webkit-transition: padding .3s linear;
       -moz-transition: padding .3s linear;
        -ms-transition: padding .3s linear;
         -o-transition: padding .3s linear;
            transition: padding .3s linear;
}

JSFiddle Demo .