滾動時保持在頂部的凹面 header

Question

我在網上找到了很多有彎曲 header 的選項，其中一些是凹形的。

這是我想要獲得的效果，但是我希望能夠將 header 保持在頂部，即使在滾動列表時也是如此。

這是我找到並稍作修改的代碼筆，但它並沒有將 header 保持在頂部：

https://codepen.io/rept/pen/XWWeBoE

 * { box-sizing: border-box; margin: 0; padding: 0; } li { list-style-type: none; }.container { width: 256px; background: #2a6a8d; font-family: Arial Narrow; } h1 { text-align: center; color: white; }.content { display: block; margin: auto; padding: 16px; background-color: #e7eeff; border-top-right-radius: 30px; border-top-left-radius: 30px; width: 100%; }

 <div class="container"> <h1>Title</h1> <ul class="content"> <li>- Content 1</li> <li>- Content 2</li> <li>- Content 3</li> <li>- Content 4</li> <li>- Content 5</li> <li>- Content 6</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> </ul> </div>

Answer 1

您的內容應該可以在內部滾動以實現您想要的。

我添加的是這個

max-height: 200px;
overflow: scroll;

您應該根據需要調整最大高度。

 * { box-sizing: border-box; margin: 0; padding: 0; } li { list-style-type: none; }.container { width: 256px; background: #2a6a8d; font-family: Arial Narrow; } h1 { text-align: center; color: white; }.content { display: block; margin: auto; padding: 16px; background-color: #e7eeff; border-top-right-radius: 30px; border-top-left-radius: 30px; width: 100%; max-height: 200px; overflow: scroll; }

 <div class="container"> <h1>Title</h1> <ul class="content"> <li>- Content 1</li> <li>- Content 2</li> <li>- Content 3</li> <li>- Content 4</li> <li>- Content 5</li> <li>- Content 6</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> </ul> </div>

Answer 2

使用position:sticky並以不同的方式制作曲線以使其成為標題的一部分。

這是一個使用多個背景的想法：

 * { box-sizing: border-box; margin: 0; padding: 0; } li { list-style-type: none; }.container { width: 256px; } h1 { text-align: center; color: white; position:sticky; top:0; background: radial-gradient(farthest-side at bottom left, transparent 98%,#2a6a8d 100%) bottom right, radial-gradient(farthest-side at bottom right,transparent 98%,#2a6a8d 100%) bottom left, #2a6a8d content-box; background-size:30px 30px; background-repeat:no-repeat; padding-bottom:30px; margin-bottom:-30px; }.content { margin: auto; padding: 16px; background-color: #e7eeff; }

 <div class="container"> <h1>Title</h1> <ul class="content"> <li>- Content 1</li> <li>- Content 2</li> <li>- Content 3</li> <li>- Content 4</li> <li>- Content 5</li> <li>- Content 6</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 6</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> <li>- Content 13</li> </ul> </div>

Answer 3

您可以使用此代碼

 body { padding: 0; margin: 0; } * { box-sizing: border-box; margin: 0; padding: 0; } li { list-style-type: none; }.container { width: 256px; background: #2a6a8d; font-family: Arial Narrow; } h1 { text-align: center; color: white; }.content { display: block; margin: auto; padding: 16px; background-color: #e7eeff; border-top-right-radius: 30px; border-top-left-radius: 30px; width: 100%; max-height: 300px; overflow: scroll; }

 <div class="container"> <h1>Title</h1> <ul class="content"> <li>- Content 1</li> <li>- Content 2</li> <li>- Content 3</li> <li>- Content 4</li> <li>- Content 5</li> <li>- Content 6</li> <li>- Content 7</li> <li>- Content 8</li> <li>- Content 9</li> <li>- Content 10</li> <li>- Content 11</li> <li>- Content 12</li> <li>- Content 13</li> <li>- Content 14</li> <li>- Content 15</li> <li>- Content 16</li> <li>- Content 17</li> <li>- Content 18</li> <li>- Content 19</li> <li>- Content 20</li> </ul> </div>