Concave header which stays at top when scrolling

Question

I've found a lot of options to have a curved header on the net, some which are concave.

This is the effect I want to get, however I want to be able to keep the header on top, even when scrolling through a list.

This is the codepen I found and slightly adapted, but it doesn't keep the header on top:

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

Your content should be scrollable inside to achieve what you want.

What I added is this

max-height: 200px;
overflow: scroll;

You should adjust max-height to your needs.

 * { 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

Use position:sticky and do the curve differently to make it a part of the title.

Here is an idea using multiple background:

 * { 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

You can use this code

 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>