javascript - 滚动到元素高度+内容变化

Question

我环顾四周，看看是否已经涵盖了这一点，但没有。

我正在使用 HTML5、CSS3(+ 动画)、bootstrap、Vanilla JS 和 jQuery 构建网站。我希望为网站诱导的行为是用户访问登录页面并且滚动条位于顶部的行为。然后，向下滚动到某个点后，将出现一个完全不同的屏幕。

这是(也许)棘手的部分:

我希望访问者能够在第二个屏幕上一直向上滚动到滚动条可以达到的高度。只有当滚动条位于顶部并且他们尝试向上滚动到当前窗口的顶部时，原始的第一个屏幕才会重新播放(如果他们决定，仍然坚持他们在第二个屏幕上取得的进展向下滚动)。

负的 scrollTop/浏览器/窗口高度触发一个事件，在该事件中用户可以使用最大化的向上滚动条在页面之间导航？ (我应该使用框架吗？)非常感谢!

Answer 1

您可以在滚动时复制元素， 我做了一个plunker给你一个想法

jQDocument.on("scroll", () => {
  if(jQDocument.scrollTop() < 200) {
    //Duplicate elements on top while scrolling up
    let topScreen = detectTopScreen()
    let indexTopScreen = getIndex(topScreen)
    let screenIndexToDuplicate
    if(indexTopScreen > 0) {
      screenIndexToDuplicate = indexTopScreen - 1
    } else {
      screenIndexToDuplicate = maxIndex
    }
    let screenToPrepend = originalLoopDiv.children().eq(screenIndexToDuplicate).clone()
    loopDiv.prepend(screenToPrepend)

    if(loopDiv.children().length > 6) {
      loopDiv.children().eq(loopDiv.children().length - 1).remove()
    }
  }

  if(jQDocument.scrollTop() + jQWindow.outerHeight() > jQBody.outerHeight() - 200) {
    //Duplicate elements on bottom while scrolling down
    let bottomScreen = detectBottomScreen()
    let indexBottomScreen = getIndex(bottomScreen)
    let screenIndexToDuplicate
    if(indexBottomScreen < maxIndex) {
      screenIndexToDuplicate = indexBottomScreen + 1
    } else {
      screenIndexToDuplicate = 0
    }
    let screenToAppend = originalLoopDiv.children().eq(screenIndexToDuplicate).clone()
    loopDiv.append(screenToAppend)

    if(loopDiv.children().length > 6) {
      loopDiv.children().eq(0).remove()
    }
  }
})