时间戳

首页 > 解决方案 > 我想做一个冻结的标题

html - 我想做一个冻结的标题

问题描述

所以我正在尝试制作一个冻结的标题。我在横幅下有一个顶部导航，我想让横幅在我向下滚动后消失，但顶部导航在到达顶部时会冻结。我不知道该怎么做，position: fixed因为我希望下面的元素冻结。基本上我要说的是这个

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

我想这样当我向下滚动时，横幅会消失，但导航会冻结在页面顶部，所以它仍然可见

标签： htmlcss

解决方案

除非你想支持 IE11 然后定位：粘性是要走的路。这是一个如何使用它的示例。

.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>

推荐阅读