Encabezado cóncavo que permanece en la parte superior al desplazarse

Question

He encontrado muchas opciones para tener un encabezado curvo en la red, algunas de las cuales son cóncavas.

Este es el efecto que quiero obtener, sin embargo, quiero poder mantener el encabezado en la parte superior, incluso cuando me desplazo por una lista.

enter image description here

Este es el codepen que encontré y ligeramente adaptado, pero no mantiene el encabezado en la parte superior:

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>

html css

0

rept 30 oct. 2019 a las 16:37

Answer 1

Use position:sticky y haga la curva de manera diferente para que sea parte del título.

Aquí hay una idea usando múltiples antecedentes:

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

1

Temani Afif 30 oct. 2019 a las 14:36

Answer 2

Puedes usar este código

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>

-1

Piyush Teraiya 31 oct. 2019 a las 07:04

Answer 3

Su contenido debe ser desplazable por dentro para lograr lo que desea.

Lo que agregué es esto

max-height: 200px;
overflow: scroll;

Debe ajustar la altura máxima a sus necesidades.

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

2

Nicholas 30 oct. 2019 a las 13:43

Encabezado cóncavo que permanece en la parte superior al desplazarse

3 respuestas

Preguntas relacionadas

Nuevas preguntas

html