CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jb07
jb07

Reputation: 81

Scroll above element height + content change

I have looked around to see if this has been covered, but no dice.

I'm building a website using HTML5, CSS3 (+ animations), bootstrap, Vanilla JS and jQuery. The behavior I'm looking to induce for the site is one where a user visits a landing page and the scroll bar is situated at the top. Then, upon scrolling down past a certain point, a completely different screen takes over.

Here's the (maybe) tricky part:

I want for a visitor to be able to scroll all the way up on this 2nd screen as high as the scrollbar can go. Only once the scroll bar is at the top and they try try to scroll up past the top of the current window, that the original, first screen comes back in to play (while still persisting the progress they made on the 2nd screen if they decide to scroll back down).

Negative scrollTop/browser/window heights to trigger an event in which a user can navigate between pages using a maxed out up-top scrollbar? (& should I use a framework?) Much appreciated!

Upvotes: 2

Views: 225

Answers (1)

raythurnevoid
raythurnevoid

Reputation: 2824

You could duplicate elements while scrolling, I made a plunker to give you an idea

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

Upvotes: 1

Related Questions