Question

我想创建一个面板，滚动到顶部，其中包含固定内容。

我想产生这种效果：Curtain JS

我不想使用Curtain JS插件，因为我只需要第一个效果。第一个面板滚动，当他消失时，将被删除。事实上，它的效果只能播放一次。

所以我试试这个：my test

但是下面的内容并没有修复。

$(document).ready(function () {
    var $vertical = $('#vertical');

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).height() - $vertical.height()));

        $vertical.css({
            'bottom': position
        });
    });
});

我可以帮忙吗？

Answer 1

以下是有效版本：http://jsfiddle.net/1wtaofr2/1/ JS：

  $(document).ready(function () {
    var $vertical = $('#vertical');

    $('body').height($('.test').height() + $vertical.height());

    $(window).scroll(function () {
        var s = $(this).scrollTop(),
            d = $(document).height(),
            c = $(this).height();

        scrollPercent = (s / (d - c));

        var position = (scrollPercent * ($(document).height() - $vertical.height()));

        $vertical.css({
            "-webkit-transform":"translateY(-"+ position +"px)"
        });

        if (position > $vertical.height()) {
            $('.test').css({
            position: 'relative',
            'padding-top': $vertical.height()
          })
        }

        if (position < $vertical.height()) {
            $('.test').css({
            position: 'fixed',
            'padding-top': 0
          })
        }
    });
});

的CSS：

body {
    margin-left: 0;
}

#vertical {
    position: fixed;
    width: 100%;
    height: 100%;
    background: red;
    top: 0;
    left: 0;
    bottom: 0;
}

.test {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

如果您想使用外部库，可能会发现scrollr有用。

面板上滑效果

1 个答案: