2

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

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

到目前为止，这是我的 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/

4

3 回答 3

4

干得好：

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

并将 CSStransition属性添加到.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 演示。

于 2013-08-27T13:44:49.527 回答
2

我相信你把数字倒过来了。您从计算中得到一个负数。例如：

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

根据Carrera World 网站的例子，我认为相信是您正在寻找的效果？

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

我还给了你headeramin-height以防止它在极端情况下变得太小。

CSS

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

希望这可以帮助你！

JSFiddle 示例。

于 2013-08-27T13:32:26.527 回答
2

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

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

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

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

于 2013-08-27T13:59:43.607 回答