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

将position relative添加到行并将position absolute和top 0添加到 title 类，则标题将始终相对于顶部行。

Answer 2

基于 Golwin 的回答，我在{strong> row 类中添加了position: relative;，并将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>

如何使元素仅停留在容器的顶部

2 个答案: