# 解决滑动动画不流畅的问题：优化 fixed 元素动画效果的实用指南

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

# 解决滑动动画不流畅的问题：优化 fixed 元素动画效果的实用指南

2025-10-20

浏览次数：次

返回列表

# 解决滑动动画不流畅的问题：优化 fixed 元素动画效果的实用指南

本文旨在解决使用 html、css 和 j*ascript 创建滑动动画时出现的不流畅问题，特别是当页面顶部固定面板（`position: fixed`）向上滑动消失，同时页面主体向上移动以填充面板空间时，可能出现的动画卡顿或闪烁问题。我们将探讨问题的原因，并提供多种解决方案，包括使用 `position: sticky`、css transitions 和 web animations api，以实现更平滑、更流畅的动画效果。

在网页开发中，创建流畅的用户体验至关重要。当涉及到动画时，尤其需要注意性能和视觉效果。本文将重点介绍如何解决在使用 HTML、CSS 和 J*aScript 创建滑动动画时可能遇到的不流畅问题，特别是在涉及固定定位（`position: fixed`）元素时。 ### 问题分析当一个固定定位的面板向上滑动消失，同时页面主体向上移动以填充面板空间时，如果动画不同步或计算不精确，可能会出现以下问题： * **空白闪烁**：在动画过程中，页面主体尚未完全填充面板空间时，可能会短暂地显示空白区域。 * **动画卡顿**：由于浏览器渲染性能的限制或动画计算的复杂性，动画可能出现卡顿或掉帧现象。 * **视觉抖动**：在不同屏幕尺寸或设备上，由于像素对齐或计算误差，动画可能出现轻微的抖动。这些问题通常是由于以下原因造成的： * **动画不同步**：面板和页面主体的动画时间和移动距离不一致。 * **不精确的定位**：使用绝对值或魔术数字进行定位，导致在不同屏幕尺寸上出现偏差。 * **过度使用 `position: fixed`**：`position: fixed` 可能会导致布局和渲染上的问题，尤其是在动画中。 ### 解决方案以下是几种解决滑动动画不流畅问题的方案，每种方案都有其优缺点，可以根据具体情况选择最适合的方案。 #### 1. 使用 `position: sticky` `position: sticky` 是一个相对较新的 CSS 属性，它结合了 `position: relative` 和 `position: fixed` 的特性。当元素在视口中滚动到特定位置时，它会变成固定定位，否则保持相对定位。使用 `position: sticky` 的优点是： * **简单易用**：无需 J*aScript 计算，只需 CSS 即可实现。 * **自动适应**：元素会自动适应不同屏幕尺寸和滚动位置。 * **减少抖动**：与 `position: fixed` 相比，`position: sticky` 减少了视觉抖动的可能性。以下是使用 `position: sticky` 的示例代码： ```html

By accessing and using this website, you acknowledge that you h*e read and understand our Cookie Policy, Privacy Policy, and our Terms of Service.

Hello! I'm Dylan Anderton

Consult, Design, and Develop Websites

H*e something great in mind? Feel free to contact me.
I'll help you to make it happen.

.panel{
  z-index: 1;
  position: sticky;
  top: 0;
  transition:
    margin-bottom 1s,
    transform 1s;
}
.hero {
  position: relative;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

.panel-content{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--smokeGrey);
}

.panel-text{
  display:inline;
}

.cookie, .privacy, .tos{
  text-decoration:none;
}

.panel-button{
  display:inline;
  padding: 10px 16px;
  background-color: #007bc1;
  color: white;
  border: none;
  border-radius: 2px;
}

.panel-button:hover{
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}

@media(max-width:675px){
  .notif-panel{
    height: 10%;
  }
  .panel-content{
    padding: 0 5px;
  }
  .panel-text{
    padding-right: 15px;
  }
  .panel-button{
    font-size: 17px;
}
}

@media(max-width:605px){
  .notif-panel{
    height: 15%;
  }
  .panel-content{
    align-items: left;
    display: block;
    padding: 10px;
    font-size: 18px;
  }
  .panel-text{
    padding-bottom: 10px;
    display: block;
  }
  .panel-button{
    font-size: 17px;
}
}

.main-page{
  width: 100%;
}

.hero{
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0,74,117,.52),rgba(0,74,117,.52)), url('assets/work-desk__dustin-lee.jpg');
  height: 600px;
}

.logo{
  height: 50px;
  width: 50px;
  position: absolute;
  left: 30px;
  top: 25px;
}

.hero-content{
  margin:0;
  text-align: center;
  color: white;
}

.name{
  font-size: 30px;
}

.contact-text{
  margin-top: 8px;
  padding-bottom: 25px;
}

.contact-button{
  font-weight: bold;
  color: white;
  background-color: transparent;
  border: white 2px solid;
  padding: 12px 15px;
  border-radius: 2px;
}

.contact-button:hover{
  color: var(--blue);
  background-color: white;
}

const panel = document.getElementById('panel');
const page = document.getElementById('main-page');

function closePanel(){
  const {bottom} = panel.getBoundingClientRect();
  panel.style.marginBottom = 0 + "px";
  panel.addEventListener("transitionend", () => panel.replaceWith());

  // marginBottom shrinks the element;
  // translateY() slides it out.

  setTimeout(() => {
    panel.style.marginBottom = `${-bottom}px`;
    panel.style.transform = `translateY(${-bottom}px)`;
  }, 0);
}

注意事项：

position: sticky 需要指定 top、right、bottom 或 left 属性才能生效。
position: sticky 的兼容性不如 position: fixed，需要考虑浏览器兼容性问题。

2. 使用 CSS Transitions

CSS Transitions 允许您在 CSS 属性值发生变化时创建平滑的动画效果。

使用 CSS Transitions 的优点是：

简单易用：只需 CSS 即可实现简单的动画效果。
性能良好：浏览器可以优化 CSS Transitions 的性能。

以下是使用 CSS Transitions 的示例代码：

<div class="panel" id="panel">
  <div class="notif-panel" id="notifPanel">
    <div class="panel-content">
      <p class="panel-text">By accessing and using this website, you acknowledge that you h*e read and
        <span class="brCust" id="brCust"></span>understand our
        <a class="cookie" href="#">Cookie Policy</a>,
        <a class="privacy" href="#">Privacy Policy</a>, and our
        <a class="tos" href="#">Terms of Service</a>.
      </p>
      <button class="panel-button" onclick="closePanel()">Got it</button>
    </div>
  </div>
</div>

<div class="main-page" id="main-page">
  <section class="hero" id="hero">
      @@##@@
      <div class="hero-content">
          <p class="name">Hello! I'm Dylan Anderton</p>
          <h2 class="slogan">Consult, Design, and Develop Websites</h2>
          <p class="contact-text">H*e something great in mind? Feel free to contact me.<br> I'll help you to make it happen.</p>
          <button class="contact-button">LET'S MAKE CONTACT</button>
      </div>
  </section>
</div>

/* I had to move position:fixed to this top-level element */
.panel{
  z-index: 1;
  position: fixed;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

.panel-content{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--smokeGrey);
}

.panel-text{
  display:inline;
}

.cookie, .privacy, .tos{
  text-decoration:none;
}

.panel-button{
  display:inline;
  padding: 10px 16px;
  background-color: #007bc1;
  color: white;
  border: none;
  border-radius: 2px;
}

.panel-button:hover{
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}

@media(max-width:675px){
  .notif-panel{
    height: 10%;
  }
  .panel-content{
    padding: 0 5px;
  }
  .panel-text{
    padding-right: 15px;
  }
  .panel-button{
    font-size: 17px;
}
}

@media(max-width:605px){
  .notif-panel{
    height: 15%;
  }
  .panel-content{
    align-items: left;
    display: block;
    padding: 10px;
    font-size: 18px;
  }
  .panel-text{
    padding-bottom: 10px;
    display: block;
  }
  .panel-button{
    font-size: 17px;
}
}

.main-page{
  position: absolute;
  width: 100%;
}

.hero{
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0,74,117,.52),rgba(0,74,117,.52)), url('assets/work-desk__dustin-lee.jpg');
  height: 600px;
}

.logo{
  height: 50px;
  width: 50px;
  position: absolute;
  left: 30px;
  top: 25px;
}

.hero-content{
  margin:0;
  text-align: center;
  color: white;
}

.name{
  font-size: 30px;
}

.contact-text{
  margin-top: 8px;
  padding-bottom: 25px;
}

.contact-button{
  font-weight: bold;
  color: white;
  background-color: transparent;
  border: white 2px solid;
  padding: 12px 15px;
  border-radius: 2px;
}

.contact-button:hover{
  color: var(--blue);
  background-color: white;
}

const panel = document.getElementById('panel');
const page = document.getElementById('main-page');

function closePanel(){
  const rectPanel = panel.getBoundingClientRect();
  panel.style.top = 0;
  page.style.top = rectPanel.bottom + "px";

  panel.style.transition = "top 1s ease-in-out";
  page.style.transition = "top 1s ease-in-out";

  // Don't forget to remove it from the DOM
  panel.addEventListener("transitionend", () => panel.replaceWith());

  setTimeout(() => {
    panel.style.top = -rectPanel.bottom + "px";
    page.style.top = 0;
  }, 0);
}

注意事项：

需要精确计算面板的高度，并将其应用于页面主体的 top 属性。
确保面板和页面主体的动画时间和缓动函数一致，以实现同步动画效果。
需要在动画结束后将面板从 DOM 中移除，以避免影响页面布局。

3. 使用 Web Animations API

Web Animations API 提供了更强大的动画控制能力，允许您使用 J*aScript 创建复杂的动画效果。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

使用 Web Animations API 的优点是：

更强大的控制：可以精确控制动画的每个细节，例如关键帧、时间和缓动函数。
更高的性能：浏览器可以优化 Web Animations API 的性能。
更灵活：可以创建更复杂的动画效果，例如路径动画和变形动画。

以下是使用 Web Animations API 的示例代码：

<div class="panel" id="panel">
  <div class="notif-panel" id="notifPanel">
    <div class="panel-content">
      <p class="panel-text">By accessing and using this website, you acknowledge that you h*e read and
        <span class="brCust" id="brCust"></span>understand our
        <a class="cookie" href="#">Cookie Policy</a>,
        <a class="privacy" href="#">Privacy Policy</a>, and our
        <a class="tos" href="#">Terms of Service</a>.
      </p>
      <button class="panel-button" onclick="closePanel()">Got it</button>
    </div>
  </div>
</div>

<div class="main-page" id="main-page">
  <section class="hero" id="hero">
      @@##@@
      <div class="hero-content">
          <p class="name">Hello! I'm Dylan Anderton</p>
          <h2 class="slogan">Consult, Design, and Develop Websites</h2>
          <p class="contact-text">H*e something great in mind? Feel free to contact me.<br> I'll help you to make it happen.</p>
          <button class="contact-button">LET'S MAKE CONTACT</button>
      </div>
  </section>
</div>

/* I had to move position:fixed to this top-level element */
.panel{
  z-index: 1;
  position: fixed;
}

*{
  margin:0;
  padding:0;
}
html {--smokeGrey:#eee}

.notif-panel{
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "panel-content";
}

.panel-content{
  display:flex;
  justify-content:center;
  align-items:center;
  background-color:var(--smokeGrey);
}

.panel-text{
  display:inline;
}

.cookie, .privacy, .tos{
  text-decoration:none;
}

.panel-button{
  display:inline;
  padding: 10px 16px;
  background-color: #007bc1;
  color: white;
  border: none;
  border-radius: 2px;
}

.panel-button:hover{
  background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
}

@media(max-width:675px){
  .notif-panel{
    height: 10%;
  }
  .panel-content{
    padding: 0 5px;
  }
  .panel-text{
    padding-right: 15px;
  }
  .panel-button{
    font-size: 17px;
}
}

@media(max-width:605px){
  .notif-panel{
    height: 15%;
  }
  .panel-content{
    align-items: left;
    display: block;
    padding: 10px;
    font-size: 18px;
  }
  .panel-text{
    padding-bottom: 10px;
    display: block;
  }
  .panel-button{
    font-size: 17px;
}
}

.main-page{
  position: absolute;
  width: 100%;
}

.hero{
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(rgba(0,74,117,.52),rgba(0,74,117,.52)), url('assets/work-desk__dustin-lee.jpg');
  height: 600px;
}

.logo{
  height: 50px;
  width: 50px;
  position: absolute;
  left: 30px;
  top: 25px;
}

.hero-content{
  margin:0;
  text-align: center;
  color: white;
}

.name{
  font-size: 30px;
}

.contact-text{
  margin-top: 8px;
  padding-bottom: 25px;
}

.contact-button{
  font-weight: bold;
  color: white;
  background-color: transparent;
  border: white 2px solid;
  padding: 12px 15px;
  border-radius: 2px;
}

.contact-button:hover{
  color: var(--blue);
  background-color: white;
}

const panel = document.getElementById('panel');
const page = document.getElementById('main-page');

function closePanel(){
  const {bottom} = panel.getBoundingClientRect();
  const duration = 1000; // ms

  panel.animate(
      { top: [0, `${-bottom}px`] },
    { duration }
  ).finished.then(() => {
    panel.replaceWith(); // Don't forget to remove element from DOM!
  });

  page.animate(
    { top: [`${bottom}px`, 0] },
    { duration }
  );
}

注意事项：