使用另一个部分滚动页面部分
[英]Scroll a page section using another section
问题描述
我正在尝试制作一个页面部分，您可以在另一个部分上滚动。
示例： https://www.getrepeat.io
如您所见，“提供您的退货”部分正在被“合适的产品”部分滚动。 而且，当“给予你的回报”部分被其他部分滚动时，“给予你的回报”部分也与其他部分一起移动。 现在，我只知道如何在“退货”部分没有与其他部分一起移动时执行此操作。 如何实现示例网站中的此部分效果？
先感谢您。
1 个解决方案
解决方案1
0 2022-10-04 06:31:51
您可以使用纯 CSS 来完成。试试这个：
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>
滚动到另一页的特定部分
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.