Jump to content


Smooth Page Scroll and position sticky

Recommended Posts


Hello. I really like the smooth scrolling that OSUblake did. 

But I ran into a problem: my "position: sticky" doesn't work. I understand that it has to do with the fact that the Smooth Scroll animation itself works thanks to a fixed block. And the scrolling itself is an imitation. 


So how do you prevent the browser from scrolling the content? Position your content in a fixed container, and set the height of the body equal to the height of your content. This will allow the page to scroll, but the fixed container won't move. Now animate the y position of your content based on the scroll position of the page

Can you tell me if there's any way to solve this problem?  



Link to comment
Share on other sites

4 minutes ago, qqignatqq said:

Can you tell me if there's any way to solve this problem?

Using any performant way of doing smooth scrolling, there's not a way to use position:sticky directly as far as I know. Because you're using an alternative scroll method and sticky only works with the default way of scrolling. 


I recommend implementing position: sticky via JS: https://jsfiddle.net/y4wq2mcb/

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.