Skrollr - How to stop div-stop scrolling when reaching the top window

I am trying to make my site using Skrollr (javascript library): http://prinzhorn.imtqy.com/skrollr/

Scrollr works fine, but I can't figure out one thing. How to stop scrolling div further from the top of the screen. When the top of the div hits the top of my page, I want it to stop scrolling, so when the second div starts to pick up the top, it gives a sense of stacked cards.

And when scrolling backward, the div will start to scroll after the top left the bottom of the page.

I hope my explanations are a little clear, if not I try to explain the use of graphics.

Now part of the code. After reading the documentation, I tried both:

data-top as well as data-end none of them actually worked.

I also tried: data-top="background-position:0px 0px;"

I’m not even sure that what I want to achieve is possible or not.

If not, I can impose a vertical scroll, decreasing the scroll speed after the top of the div crosses the top of the browser window.

Please ask me if any of my explanations are confusing, I know that it is not easy to explain the problem verbally.

+4
source share
2 answers

skrollr does no magic, just CSS. If you want the div to stop, find a way to do this with CSS. This is usually done using fixed positioning.

Like this (not tested, but should give you an idea)

 <section data-0="position:static;" data-top="position:fixed;"></section> 

Now one problem may arise. All of the following elements will move up because the element is taken out of the stream. You can solve this, for example, using a dummy element or margin-top or top (with relative positioning) in combination with data-anchor-target pointing to the element.

+4
source

Just specify the period for which you want it to be at the top, having two data points (scroll) and keeping the top css the same .... see below.

 First Card <div id="image1" data-0="top:0px;" data-1000="top:1000px;" data-1500="top:1500px;"> Second card <div id="image2" data-0="top:1500px;" data-1500="top:1500px;" data-2000="top:2000px;"> 
0
source

Source: https://habr.com/ru/post/1479164/


All Articles