javascript - Skrollr - How to stop the div stop scrolling when reaching top ot window - Stack Overflow

admin管理员组

文章数量:1349231

I am trying to make my website using Skrollr (javascript library): /

The scrollr works fine, but I am not able to figure out one thing. How do I stop a div scrolling further away from the top of the screen. Once the top of the div hits the top of my page, i want it to stop scrolling, so that when the second div starts ing on top of it, it gives the feeling of stacked cards.

And when scrolling back, the div will start to scroll after the one on top has left the bottom of the page.

I hope my explanation is a bit clear, if not I will try to explain using graphics.

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

data-top and data-end none of them worked actually.

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

I am not even sure if what I want to achieve is possible or not.

If not, can I do overlapping vertical scrolling by reducing the scroll speed after the top of the div crosses the top of browser window.

Please ask me if any of my explanation is confusing, I know it's not easy to explain the problem verbally.

I am trying to make my website using Skrollr (javascript library): http://prinzhorn.github.io/skrollr/

The scrollr works fine, but I am not able to figure out one thing. How do I stop a div scrolling further away from the top of the screen. Once the top of the div hits the top of my page, i want it to stop scrolling, so that when the second div starts ing on top of it, it gives the feeling of stacked cards.

And when scrolling back, the div will start to scroll after the one on top has left the bottom of the page.

I hope my explanation is a bit clear, if not I will try to explain using graphics.

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

data-top and data-end none of them worked actually.

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

I am not even sure if what I want to achieve is possible or not.

If not, can I do overlapping vertical scrolling by reducing the scroll speed after the top of the div crosses the top of browser window.

Please ask me if any of my explanation is confusing, I know it's not easy to explain the problem verbally.

• javascript
• parallax

Share Improve this question Follow edited May 28, 2015 at 6:16 alex 491k204204 gold badges889889 silver badges991991 bronze badges asked May 4, 2013 at 18:59 ssdesignssdesign 2,82166 gold badges4040 silver badges5656 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

skrollr does not do any magic, just CSS. If you want the div to stop, then find a way to do this using CSS. Usually this is acplished using fixed positioning.

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

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

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

Just specify the period for which you wish it to stay at the top by having two data points (scroll distances) and keep 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;">

Add height to parent div and Use CSS3 position:sticky property. Smooth scrolling :)

<section id="" style="height: 6200px">
    <div id="skrollr-body" class="main-container" data-0="position:sticky;" data-900="position:sticky;" style="width: 100%;max-width: 100%;top:50px">
      Content
    </div>
  </section>

本文标签： javascriptSkrollrHow to stop the div stop scrolling when reaching top ot windowStack Overflow