bootstrap4侧边栏_使用纯CSS和Bootstrap 4构建多个堆叠式粘性侧边栏-CSDN博客

bootstrap4侧边栏

Making high performant, pure CSS sticky sidebars that stack with Bootstrap 4.

制作与Bootstrap 4堆叠在一起的高性能，纯CSS粘性侧边栏。

This will be a quick and pretty cool tutorial on a neat trick on how to have multiple sticky sidebars that stack without using any JavaScript!

这将是一个快速而又很酷的教程，它巧妙地介绍了如何在不使用任何JavaScript的情况下堆叠多个粘性侧边栏 ！

I figured this out the other day brain storming ideas with @chrisoncode for the new Scotch website sidebar. As fun and cool as JavaScript is, it's just not as snappy and way more bloated than say a pure CSS implementation of stuff like this (which is one of our main goals for our Scotch.io redesign).

几天前，我通过@chrisoncode为新的Scotch网站侧边栏想出了一些令人费解的想法。作为乐趣和凉爽如JavaScript是，它只是没有那么活泼和方式比说像这样的纯CSS实现的东西（这是我们为我们的主要目标之一更加臃肿 Scotch.io重新设计）。

In this tutorial I will discuss:

在本教程中，我将讨论：

What the heck I mean by this mouthful: "Multiple Stacking Sticky Sidebars.
我这口是什么意思：“多重堆叠的粘性侧边栏 。
Reasons that you would want to do this.
您想要这样做的原因。
General beefs devs have with doing it with JavaScript or plugins.
一般的牛肉开发人员都可以使用JavaScript或插件来完成此任务。
The technique with CSS3 (position: sticky).
CSS3（ position: sticky ）的技术。
That same technique with a simple trick I figured out to make it stackable with pure CSS.
我想出了一种简单的技巧就可以使它与纯CSS堆叠在一起。
Bunch of Bootstrap 4 Demos with Dead-Simple Sticky Sidebars
一堆带有死区简单粘性侧边栏的Bootstrap 4演示

I'll also have many code samples and demos throughout this post. Then some simple demos / templates to show you how easy it is with Bootstrap 4.

在这篇文章中，我还将有许多代码示例和演示。然后是一些简单的演示/模板，向您展示Bootstrap 4的简易性。

It's so easy, in a lot of ways I am scared to publish this post because of the abuse of the design pattern by websites. You'll see more as you scroll and read below, but let's just roll with the future punches and begin.

这是如此简单，由于网站滥用了设计模式，我很害怕以多种方式发表这篇文章。滚动阅读下面的内容时，您会看到更多。但是，让我们随着将来的拳头滚动并开始吧。

“ Multiple Stacking Sticky Sidebars”到底意味着什么？ ( What the heck does "Multiple Stacking Sticky Sidebars" even mean? )

I'm talking specifically about this design pattern where there's a single sidebar with multiple sticky content in it:

我正在专门讨论这种设计模式，其中只有一个带有多个粘性内容的侧边栏：

The word "multiple" regerences if we do more than one of these on page. Stacking references to the single sidebar having multiple stacking pieces.. I know that this is kind-of confusing and weird, but I couldn't find or think up a better term for the concept.

如果我们在页面上执行多个操作，则表示“多个”单词。 对具有多个堆叠件的单个侧边栏的堆叠引用。 。我知道这有点令人困惑和奇怪，但是我找不到或想出一个更好的概念。

Don't worry though, we'll get to that craziness soon enough of "Multiple Stacking Sticky Sidebars"...

不过请放心，我们会尽早解决“ Multiple Stacking Sticky Sidebars”的疯狂……

那为什么要这样做呢？ (So why do this?)

There's a couple reason why you would probably want to do this. Just to name a few:

您可能要这样做有两个原因。仅举几个：

It's cool, different.
很酷，不同。
Maybe make a subnav easily accessible.
也许使subnav易于访问。
You want to highlight your content in your sidebar more as a user scrolls.
您希望在用户滚动时在侧栏中更多地突出显示您的内容。
You want (have to?) increase your ad impressions, clicks, and page views.
您想要（必须？）增加广告展示次数，点击次数和网页浏览量。