Как сделать элемент прикрепленным только к вершине его контейнера

Question

Когда пользователь просматривает мою страницу на мобильном устройстве, я хочу, чтобы мой заголовок прикреплялся к верхней части его контейнера.Каждая строка имеет свой собственный заголовок, так что пользователь прокручивает, и div исчезает, поэтому если заголовок уходит, и новый заголовок должен прилипать.

Это мой HTML-макет в значительной степени:

<div class="page-container">
    <div class="row">
        <div class="title"></div>
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
        <div class="content-four"></div>
        <div class="content-five"></div>
    </div>
    <div class="row">
        <div class="title"></div>
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
        <div class="content-four"></div>
        <div class="content-five"></div>
    </div>
    <div class="row">
        <div class="title"></div>
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
        <div class="content-four"></div>
        <div class="content-five"></div>
    </div>
    <div class="row">
        <div class="title"></div>
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
        <div class="content-four"></div>
        <div class="content-five"></div>
    </div>
    <div class="row">
        <div class="title"></div>
        <div class="content-one"></div>
        <div class="content-two"></div>
        <div class="content-three"></div>
        <div class="content-four"></div>
        <div class="content-five"></div>
    </div>
</div>

Мне нужно решение JQuery, пожалуйста ...

Answer 1

на основе ответа Golwin Я добавил position: relative; в класс row и добавил position: sticky; top: 0; в класс title , и это сработало.

.page-container {
  border: 4px solid #bbbbbb;
  margin: 0 auto;
  ;
}

.row {
  border: 4px solid black;
  margin: 5px;
  position: relative;
}

.title {
  background-color: aqua;
  border: 4px solid red;
  margin: 10px;
  padding: 20px;
  position: sticky;
  top: 0;
}

.content {
  border: 1px solid blue;
  margin: 10px;
  padding: 20px;
}

<div class="page-container">
  <div class="row">
    <div class="title">title one</div>
    <div class="content one">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content two">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content three">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content four">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content five">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
  </div>
  <div class="row">
    <div class="title">title two</div>
    <div class="content one">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content two">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content three">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content four">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content five">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
  </div>
  <div class="row">
    <div class="title">title three</div>
    <div class="content one">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content two">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content three">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content four">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content five">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
  </div>
  <div class="row">
    <div class="title">title four</div>
    <div class="content one">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content two">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content three">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content four">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content five">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
  </div>
  <div class="row">
    <div class="title">title five</div>
    <div class="content one">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content two">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content three">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content four">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
    <div class="content five">Spicy jalapeno bacon ipsum dolor amet pig tri-tip meatloaf biltong, shoulder t-bone bresaola pastrami shank landjaeger short ribs. Pancetta porchetta t-bone tenderloin rump. Leberkas fatback pork belly filet mignon t-bone turkey tri-tip ham buffalo
      shoulder short loin. Tongue biltong tail leberkas. Doner pancetta turkey ribeye, swine strip steak pork loin venison beef ribs tenderloin shank turducken short ribs jerky meatball.
    </div>
  </div>
</div>

Answer 2

добавить position relative в строку и position absolute и top 0 в title class Тогда заголовок всегда будет располагаться вверху относительно строки.