滚动时保持在顶部的凹面 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>