html - 我想制作一个卡住的标题

Question

所以我正在尝试制作一个卡住的标题。我在横幅下有一个顶部导航，我想让它在我向下滚动后消失，但顶部导航在到达顶部时卡住。我无法弄清楚如何使用 position: fixed 来做到这一点，因为我想让下面的元素卡住。基本上我要说的是这个

    <div><img src="img"></div>
    <nav>...</nav>

我想做的是当我向下滚动时，横幅消失，但导航卡住在页面顶部，所以它仍然可见

Answer 1

除非你想支持IE11 然后position: sticky是要走的路。以下是如何使用它的示例。

.sticky-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #131418;
  color: #f3f3f3;
  padding: 0.5em;
}

<div class="banner">
  <ul>
    <li>Foo</li>
    <li>bar</li>
    <li>baz</li>
  </ul>
</div>

<div class="sticky-header">
  <span>Foo</span>
  <span>bar</span>
  <span>baz</span>
</div>

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Erat pellentesque adipiscing commodo elit. Malesuada fames
    ac turpis egestas sed tempus urna. Lacinia at quis risus sed vulputate odio. Vitae nunc sed velit dignissim sodales ut eu sem. Sed odio morbi quis commodo odio aenean sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
    Odio aenean sed adipiscing diam donec adipiscing tristique risus nec. Proin sed libero enim sed faucibus. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Ultricies lacus sed turpis tincidunt. Tortor aliquam nulla facilisi cras fermentum.
    Elementum nibh tellus molestie nunc non. Nisl purus in mollis nunc sed id semper risus in. Congue mauris rhoncus aenean vel elit scelerisque mauris. Ullamcorper eget nulla facilisi etiam dignissim diam quis enim lobortis.
  </p>
  <p>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Lorem dolor sed viverra ipsum nunc aliquet bibendum enim. Ut tellus elementum sagittis vitae et leo. Arcu ac tortor dignissim convallis aenean et tortor. Sed blandit libero volutpat
    sed cras ornare arcu dui. Lorem ipsum dolor sit amet. Gravida cum sociis natoque penatibus et. Ultricies lacus sed turpis tincidunt id aliquet risus feugiat in. Leo vel orci porta non pulvinar neque laoreet suspendisse. Ultricies lacus sed turpis
    tincidunt. Ornare aenean euismod elementum nisi quis eleifend quam adipiscing. Tincidunt lobortis feugiat vivamus at augue eget. Vitae sapien pellentesque habitant morbi tristique senectus. Volutpat consequat mauris nunc congue nisi vitae suscipit.
    Semper feugiat nibh sed pulvinar. Duis at tellus at urna condimentum mattis pellentesque id nibh.
  </p>
  <p>Turpis egestas maecenas pharetra convallis posuere morbi leo. Potenti nullam ac tortor vitae purus. Facilisis sed odio morbi quis. Tempor nec feugiat nisl pretium fusce id velit ut. Lorem dolor sed viverra ipsum. Id eu nisl nunc mi ipsum faucibus. Non
    sodales neque sodales ut etiam sit. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Lacinia quis vel eros donec ac odio. Sed elementum tempus egestas sed sed.
  </p>
  <p>Et molestie ac feugiat sed lectus vestibulum. Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Adipiscing tristique risus nec feugiat in fermentum posuere urna nec. Consectetur adipiscing elit ut aliquam purus. Ultrices neque ornare aenean
    euismod elementum nisi quis eleifend. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Fermentum et sollicitudin ac orci. Tristique senectus et netus et malesuada fames ac turpis egestas. Sed nisi lacus sed viverra tellus
    in hac. Pulvinar mattis nunc sed blandit. Amet porttitor eget dolor morbi non arcu risus quis. Curabitur gravida arcu ac tortor dignissim convallis aenean et. Blandit cursus risus at ultrices mi tempus imperdiet. Hac habitasse platea dictumst quisque
    sagittis purus. Et tortor consequat id porta nibh venenatis cras sed.
  </p>
</div>