Scroll a page section using another section
Question
I'm trying to make a page section that you can scroll on with another section.
Example: https://www.getrepeat.io
As you can see, "GIVE YOUR RETURNING" section is being scrolled on by "THE RIGHT PRODUCT" section. But also, while "GIVE YOUR RETURNING" section is being scrolled on by the other section, "GIVE YOUR RETURNING" section is also moving moving together with the other section. Right now, I only know how to do this while "GIVE YOUR RETURNING" section is not moving together with the other section. How do I achieve this section effect like in the example website?
Thank you in advance.
1 answers
solution1
0 2022-10-04 06:31:51
You can do it using pure CSS. Try this:
ul { list-style-type: none; position: sticky; overflow: hidden; top: 0; width: fit-content; } li { float: left; border-right: 1px solid white; } li a { display: block; padding: 8px; background-color: #ede7e2; color: black; text-decoration: none; } li:last-child { border-right: none; } div { padding:5px; margin-top:5px; background-color:white; height:1000px; } <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Sticky Nav</title> </head> <body> <ul> <li><a href = "#home">Home</a></li> <li><a href = "#news">News</a></li> <li><a href = "#contact">Contact</a></li> <li><a href = "#about">About</a></li> </ul> <div> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> <p>Adding demo text to check fixed menu.</p> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.