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

Answer 2

我相信你已经倒数了。您的计算结果为负数。例如：

if h = 45, then 45 - $scrollTop (from your active target of 20 to 200) is very quickly a negative number.

根据Carrera World website的例子，我认为相信你正在寻找的效果？

<强>的jQuery

$(window).scroll(function(){
    var h = 45;    
    var $scrollTop = $(window).scrollTop();

    if($scrollTop < 200 && $scrollTop > 20){
        $(".header").css({
          'paddingTop': $scrollTop - h + "px"; // Subtract h from scrollTop
          'paddingBottom': $scrollTop - h + "px";
        });
    }

    $('.header').text($scrollTop); // Display scrollTop value in header (for demo).
});

我还给了你header一个min-height，以避免在边缘情况下变得太小。

<强> CSS

.header {
    ...
    line-height: 40px; /** Keep things centered vertically **/
    min-height: 40px;
}

希望这有助于你！

JSFiddle example.

Answer 3

您可以使用专门用于此任务的库，例如skrollr。如果它只是填充物，它可能不值得。

<div data-0="padding:0px;" data-200="padding:500px;"></div>

当从0滚动到200时，将填充从0到500像素设置动画。

这是一个小提琴http://jsfiddle.net/JDE8h/9/

滚动时增加/减少元素填充

3 个答案: