代码之家  ›  专栏  ›  技术社区  ›  Joshua Leung

当图像处于堆叠层时,如何检测屏幕上是否存在图像?

  •  1
  • Joshua Leung  · 技术社区  · 8 年前

    enter image description here

    .container {
      position: relative;
    }
    
    .layer1, .layer2, .layer3 {
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .layer 1 {
      z-index: 3;
    }
    
    .layer 2 {
      z-index: 2;
    }
    
    .layer 3 {
      z-index: 1;
    }
    

    第三层有一个图像。我想对图像做点什么--也许应用一些动画效果--当它显示出来的时候。

    在传统布局中,我可以使用像哇哦当用户滚动到某个元素区域时,将类应用于该元素。像这样的布局,我不能使用哇哦或者类似的。


    我意识到这个问题的内容会影响我想要的答案。 在我的实际布局中,每个布局都是在用户滚动屏幕时显示的。

    http://scrollmagic.io/examples/advanced/section_wipes_manual.html

    当用户滚动时,每一层都会显示出来。

    2 回复  |  直到 8 年前
        1
  •  0
  •   Frish    8 年前

    你有 n n 第三次迭代,停止移除层,对最后一层做一些事情。

    setTimeout() ,他的样子可能像:

    let count = 0;
    let timer = setTimeout(iterate, 2000);
    
    function iterate() {
        if count < n // remove layer and iterate count (count++)
        else if count === n // stop timer and add desired effects
    }
    
        2
  •  0
  •   Frish    8 年前

    取两个: scrollTop here ,但本质上你能做的就是在用户向下滚动页面时显示你的元素。例如:

    if(document.body.scrollTop > x) { /* do something */ }