侧栏固定 内容上下滚动_如何使用ScrollMagic.js在页面滚动上构建粘性侧栏

侧栏固定 内容上下滚动

在本教程中，我们将使用ScrollMagic.js（一个非常流行JavaScript库）来构建一个侧边栏，该侧边栏在页面滚动时变得很粘滞。 通过三个步骤（HTML，CSS和JavaScript），我们将概述整个过程。

这是我们要创建的内容（查看全屏版本以体验其完整的魔力并给它一些♥）：

仅当浏览器窗口的宽度至少为768px且到达视口的顶部边缘时，才会固定侧边栏。 较小的屏幕则采用堆叠式布局。

什么是ScrollMagic.js？

有关ScrollMagic的最佳描述，我们将转到其Github页面 ：

“用于神奇滚动交互的javascript库。”

ScrollMagic.js入门

要开始使用ScrollMagic，首先必须将其包含在项目中。 您可以通过访问其GitHub存储库，使用程序包管理器（例如npm）或通过CDN加载必要的资产（例如cdnjs ）来下载它。

对于我们的演示，我们将选择最后一个选项。 考虑到这一点，如果您在演示笔的“设置”标签下查看，您会发现我包含了一个外部JavaScript文件：

我还集成了Babel，用于将ES6代码编译为ES5。

1. HTML

我们HTML包含两个帮助器部分和一个帖子。 该帖子包含两个小节：帖子的详细信息和帖子的边栏。 在实际情况下，帖子的内容可能对应于博客帖子，旅馆房间或学校课程。

这是标记：

<section class="section">
  <!-- content here -->
</section>

<article class="post">
  <div class="container">
    <div class="post-content">
      <div class="post-details">
        <!-- content here -->
      </div>
      <aside class="post-sidebar">
        <div class="post-sidebar-inner">
          <!-- content here -->
        </div>
      </aside>
    </div>
  </div>
</article>

<section class="section section-bottom">
  <!-- content here -->
</section>

2. CSS

我们不会为示例定义任何特殊样式。 但是有趣的是，我们使用CSS网格在中等屏幕及以上（≤768px）上布局帖子内容。

这是CSS的一部分：

.section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #ee3f3f;
  color: white;
  text-align: center;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .post-content {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 70% 30%;
  }
}

3. JavaScript

有了HTML和CSS，我们准备检查负责触发ScrollMagicJavaScript代码。

请记住，了解此插件如何工作的最佳方法是阅读其文档。 另一个有用的信息来源是Petr Tichy创建的ScrollMagic备忘单 。

这是我们JavaScript代码：

const postDetails = document.querySelector(".post-details");
const postSidebar = document.querySelector(".post-sidebar");
const postSidebarContent = document.querySelector(".post-sidebar > div");

//1
const controller = new ScrollMagic.Controller(); 

//2
const scene = new ScrollMagic.Scene({
  triggerElement: postSidebar,
  triggerHook: 0,
  duration: getDuration
}).addTo(controller);

//3
if (window.matchMedia("(min-width: 768px)").matches) {
  scene.setPin(postSidebar, {pushFollowers: false});
}

//4
window.addEventListener("resize", () => {
  if (window.matchMedia("(min-width: 768px)").matches) {
    scene.setPin(postSidebar, {pushFollowers: false});
  } else {
    scene.removePin(postSidebar, true);
  }
});

function getDuration() {
  return postDetails.offsetHeight - postSidebarContent.offsetHeight;
}

让我们简要描述必要的操作：

1. 我们首先创建一个控制器。
2. 接下来，我们创建一个带有自定义选项的场景并将其添加到控制器中。
3. 如果窗口的宽度至少为768px，并且侧边栏到达视口的顶部边缘，则我们将其固定在场景中定义的持续时间内。 在我们的案例中，所需的持续时间是通过从边栏内容的高度中减去帖子的详细信息高度来计算的。
4. 随着窗口大小的调整，我们检查其宽度。 如果宽度小于768像素，则侧边栏仍然是常规文档流的一部分，否则会变得发粘。

4.浏览器支持

该插件本身具有强大的浏览器支持 。 除了插件的支持之外，我们的演示还使用CSS Grid ，因此它将仅在支持此布局方法的浏览器中工作。

结论

在本教程中，我们设法构建了一个在向下滚动页面时变得发粘的侧边栏。 我们的基本实现并不是用这个令人惊叹的库可以构建的最强大的功能，但是希望它足够有用，可以在以后的项目中利用它。

最后，如果您熟悉其他更有效的ScrollMagic方法来构建我们的演示，请在下面的评论中告诉我们。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-build-a-sticky-sidebar-on-page-scroll-with-scrollmagicjs--cms-31131

侧栏固定 内容上下滚动