使用另一個部分滾動頁面部分
[英]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.