CSS Position sticky: 当超出视口时可滚动

在本文中，我们将介绍CSS中的position: sticky属性，并详细说明它在处理超出视口时的滚动效果。position: sticky是CSS中的定位属性之一，它使元素可以在滚动时固定在某个位置，直到滚动到达特定的偏移值。

阅读更多：CSS 教程

什么是position: sticky？

position: sticky是一种定位方式，它混合了position: relative和position: fixed的特性。当一个元素被设置为sticky时，它会根据设定的偏移值在特定条件下相对于它的正常位置进行定位。

与position: fixed不同的是，position: sticky在滚动到指定位置之前会一直处于正常文档流中。一旦滚动超过指定位置，元素将固定在屏幕上，直到滚动到达指定的偏移值或达到相对于容器的底部。

如何使用position: sticky？

要将元素设置为sticky，请使用position: sticky属性和top、bottom、left或right属性来指定相对于顶部、底部、左侧或右侧的偏移值。下面是一个简单的例子：

.sticky-element {
  position: sticky;
  top: 50px;
}

在这个例子中，类名为sticky-element的元素将在滚动到顶部距离50px时固定。

position:sticky的兼容性

尽管position: sticky是CSS的一个有用特性，但它的兼容性较差。目前，它在大多数主流浏览器中受支持，包括Chrome、Firefox、Safari和Edge。然而，在一些旧版浏览器中可能不受支持或需要特定的前缀。

为了确保跨浏览器兼容性，可以使用prefix-free CSS库或autoprefixer插件来自动生成所需的浏览器前缀。

滚动时sticky元素的效果展示

以下是一个用于演示position: sticky效果的简单示例。我们将创建一个具有固定导航栏和长内容的页面。

HTML结构如下：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <header class="sticky-header">
    <nav>
      <ul>
        <li><a href="#section1">Section 1</a></li>
        <li><a href="#section2">Section 2</a></li>
        <li><a href="#section3">Section 3</a></li>
        <li><a href="#section4">Section 4</a></li>
        <li><a href="#section5">Section 5</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section id="section1">
      <h1>Section 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </section>

    <section id="section2">
      <h1>Section 2</h1>
      <p>Etiam pulvinar massa sit amet nulla vehicula, eu mollis lectus rhoncus.</p>
    </section>

    <!-- 更多内容... -->

    <section id="section5">
      <h1>Section 5</h1>
      <p>Donec quis ipsum suscipit, finibus ex quis, hendrerit metus.</p>
    </section>
  </main>

  <!-- js代码用于添加几个section元素 -->
  <script src="script.js"></script>
</body>
</html>

CSS样式如下：

body {
  margin: 0;
}

header.sticky-header {
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  position: sticky;
  top: 0;
}

nav ul {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

nav ul li {
  list-style-type: none;
}

nav ul li a {
  text-decoration: none;
  color: #333;
  padding: 10px;
}

main {
  margin-top: 50px;
}

section {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}

h1 {
  font-size: 24px;
  margin-bottom: 20px;
}

在这个示例中，我们创建了一个固定的导航栏和五个内容部分。当滚动页面时，导航栏将在到达顶部时固定在顶部，直到滚动到达最底部。每个内容部分都具有相同的高度，以便更好地展示滚动效果。

你可以根据自己的需要设置top、bottom、left或right属性来调整sticky元素的偏移值，以实现更复杂的效果。