Question

绞尽脑汁试图找出添加简单视差行为的正确逻辑。

我希望页面上有许多元素，它们的顶部偏移量开始一定距离（例如300px）。然后当您向下滚动页面时，一旦元素的顶部被显示，它将缓慢向上移动（绑定到滚动），直到元素的顶部到达视口的中间，此时它的顶部偏移为0并且它保持在原位。 / p>

我尝试使用第三方脚本（Scroll Magic，Stellar等），但是当我现在无法得到它时，我正在尝试自定义代码：

https://jsfiddle.net/louiswalch/5bxz8fku/1/

double bytesRead += (sCurrentLine.getBytes().length);

int newPercentRead = (int)((bytesRead/fileSize) * 100);

while (percentRead <= newPercentRead){

    System.out.print("#");

    percentRead++;

}

Answer 1

<强> jsBin demo 1. (margin space effect on both enter and exit)
的 jsBin demo 2. (preserve 0 margin once touched)

而不是定位section元素，（创建和）定位他们的第一个子元素，
否则你会创建一个并发混乱试图获得最高位置，但同时修改它。

此外，你不能依赖固定的300px边距（即：如果窗口高度小于500px，你已经缺少100px）。当屏幕高度非常小时，该空间可能会有所不同，因此您还需要找到idealMarg值。

var $win = $(window), $rev = $('.reveal'), winH2 = 0, winSt = 0; function reveal() { winSt = $win.scrollTop(); winH2 = $win.height()/2; $rev.each(function(i, el){ var y = el.getBoundingClientRect().top, toMiddleMax = Math.max(0, y-winH2), idealMarg = Math.min(300, toMiddleMax), margMin = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2)); $(">div", this).css({transform: "translateY("+ margMin +"px)"}); }); } $win.on({"load resize scroll" : reveal});

*{box-sizing:border-box; -webkit-box-sizing:border-box;} html, body{height:100%; margin:0;} section > div{ padding: 40px; min-height: 100vh; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div style="background-color:red">1</div> </section> <section class="reveal"> <div style="background-color: yellow">2</div> </section> <section class="reveal"> <div style="background-color: orange">3</div> </section> <section class="reveal"> <div style="background-color: pink">4</div> </section>

我在HTML中只使用<div>逻辑，它必须是section父亲的唯一第一个孩子。
欢迎您调整上面的代码，使其更高效。

Answer 2

嘿，所以这是我去找一个太棒了。

http://jsbin.com/wibiferili/edit?html,js,output

它的主旨如下。

<强> JS

var $Window = $(window),
    parallaxFactor = 2;

$('.parallaxblock').each(function(a,b){
    var element = $(b);
    element.css("top",element.data("pOffset") + "px");

    $Window.bind('scroll', function() {
        var pos = 
            // Base Offset
            element.data("pOffset")
            // parallaxFactor
            - ($Window.scrollTop() / parallaxFactor);

        pos = pos < 0 ? 0 : pos;

        element.animate({"top": pos + "px"},10);

        return;
    });

});

<强>样式

body{
  height: 4000px;
}

.parallaxblock{
  position:fixed;
  background:#999;
  opacity:.5;
}

使用示例

<div class="parallaxblock" data-p-offset=100>Im A Block</div>
<div class="parallaxblock" data-p-offset=200>Im Also Block</div>
<div class="parallaxblock" data-p-offset=1500>Im Another Block</div>

所以通过检查offest它永远不会低于0，我们可以在它到达它时将它锁定在屏幕的顶部。

我得到div上数据标签的偏移量。

如果您想更改不同位置的滚动率，可以将屏幕因子更改为屏幕高度的某个百分比。

希望这有帮助。

视差 - 偏移元素，与滚动相关联

2 个答案: