bootstrap4侧边栏_如何使用纯CSS和Bootstrap 4构建多个堆叠式粘性侧边栏

bootstrap4侧边栏

In this tutorial you’ll work on building multiple sticky sidebars that stack without using any JavaScript.

在本教程中，您将构建无需使用任何JavaScript即可堆叠的多个粘性侧栏。

We’ll discuss:

我们将讨论：

Multiple Stacking Sticky Sidebars.
多个堆叠式粘性侧边栏。
Reasons you would want to do this.
您想要这样做的原因。
Issues developers encounter doing it with JavaScript or plugins.
开发人员在使用JavaScript或插件执行此操作时遇到的问题。
The technique with CSS3 (position: sticky).
CSS3的技术( position: sticky )。
That same technique but with pure CSS.
相同的技术，但使用纯CSS。
Bunch of Bootstrap 4 Demos with Sticky Sidebars.
一堆带有粘性侧边栏的Bootstrap 4演示。

多个堆叠式粘边栏 (Multiple Stacking Sticky Sidebars)

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

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

https://codepen.io/ncerminara/pen/zaGZGK

There’s a couple reason why you might implement this. To name a few:

您可能有两个原因可以实现此目的。仅举几例：

Make sub-navigation easily accessible.
使子导航易于访问。
Highlight your content in your sidebar more as a user scrolls.
当用户滚动时，在侧边栏中突出显示您的内容。
Increase your ad impressions, clicks, and page views.
增加广告展示次数，点击次数和网页浏览量。

JavaScript方式 (The JavaScript Way)

There are many plugins for doing this:

有许多用于执行此操作的插件：

Sticky Sidebar
粘边栏
Sticky Kit
便利贴
Stickr.js
Stickr.js

It’s also possible to write a small script for it yourself, but I know most people likely use plugins.

也可以自己编写一个小脚本，但是我知道大多数人都可能使用插件。

JavaScript的工作方式 (How the JavaScript Works)

The general idea is your script or plugin will do something like this with JavaScript:

通常的想法是您的脚本或插件将使用JavaScript执行以下操作：

Calculate offset of a position: relative; element from top of window on scroll.
计算position: relative; offset position: relative; 滚动window顶部的元素。
When that element’s offset is or is about 0, calculate the position (left, top, or right) of that element against the window.
当该元素的offset为或大约为0 ，计算该元素相对于window的位置(左，上或右)。
Switch it to position: fixed; with the calculated top, left, or right.
切换至position: fixed; 计算的顶部，左侧或右侧。
Optionally, have your JS redo these calculations when it reaches the bottom of its parent.
(可选)让JS到达父级底部时重做这些计算。
Switch it to position: absolute; and position it at bottom of the container.
将其切换到position: absolute; 并将其放置在容器底部。

It’s not too bad of work, but it’s definitely a lot to juggle even if you have a plugin trying to figure this all out for you.

这不是很糟糕的工作，但是即使您有一个插件试图为您解决所有问题，也要花很多时间。

内容跳跃 (Content Jumping)

When you switch from position: relative; to position: fixed; the height is removed from the parent element. This means there might be a “jump” up of content.

当您从position: relative;切换时position: relative; position: fixed; 高度将从父元素中移除。这意味着内容可能会“跳起来”。

Check out this demo:

查看此演示：

https://codepen.io/ncerminara/pen/qKdmMz

宽度100％与自动宽度 (Width 100% vs Width Auto)

If the element you want to be “sticky” is currently position: relative; and responsive to the container (width: 100%) and then you swap to position: fixed, you’ll get an element that is 100% of the window or at width auto depending on your CSS.

如果您要“粘贴”的元素当前处于position: relative; 并响应容器(宽度：100％)，然后交换到position: fixed ，您将获得一个元素，该元素是窗口的100％或宽度自动(取决于CSS)。

Here’s our demo again. This time watch the width of the “sticky” element.

这又是我们的演示。这次注意“粘性”元素的宽度。

https://codepen.io/ncerminara/pen/qKdmMz

Finally, if you have a complicated website, with multiple sticky sidebars on a single page, that’s a lot of JavaScript calculations happening on scroll. CSS-Tricks has a great tutorial explaining through this issue.

最后，如果您有一个复杂的网站，并且在一个页面上有多个粘性侧栏，则滚动时会发生很多JavaScript计算。 CSS-Tricks有一个很好的教程，解释了这个问题。

Here’s a codepen showing that off, forked from Chris Coyier’s Codepen in that article:

这是在克里斯·科耶尔(Chris Coyier)的Codepen中分叉出来的一个代码笔展示了这一点：

https://codepen.io/ncerminara/pen/mKyvQr

不使用“ Position Sticky”JavaScript的粘性侧边栏 (Sticky Sidebars without JavaScript using “Position Sticky”)

This is no big secret if you’ve been paying attention to CSS3. You can now make any element essentially behave this way with pure CSS. It’s easy.

如果您一直关注CSS3，这并不是什么大秘密。现在，您可以使任何元素使用纯CSS本质上都具有这种行为。这很容易。

You just need to have the CSS applied and at least one direction property which is usually the top:

您只需要应用CSS和至少一个direction属性，通常通常是top ：

.make-me-sticky {
    position: sticky;
    top: 0;
}

Now, all elements with the class will be sticky to the top of the container, all the way to the bottom.

现在，所有具有该类的元素都将粘在容器的顶部，一直到底部。

Below are some demos with Bootstrap 4:

以下是有关Bootstrap 4的一些演示：

https://codepen.io/ncerminara/pen/eKNROb

浏览器支持 (Browser Support)

Like anything fun with CSS3 its browser support is not consistent. If you can afford to have IE users not have a sticky elements, it’s perfect. You wouldn’t have to worry about any complex fallback because it’ll just not implement “stickiness”.

像CSS3一样有趣，它的浏览器支持也不是一致的。如果您可以负担得起IE用户没有粘性的要素，那将是完美的选择。您不必担心任何复杂的回退，因为它不会实现“粘性”。

/* Cross-Browser Support */
.make-me-sticky {
    position: relative; /* I am the fallback */

    /* Give it everything you got! (use an auto prefixer...) */
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: -o-sticky;
    position: sticky;

    top: 0; /* Required  */
}

不使用JavaScript堆叠粘性侧边栏 (Stacking Sticky Sidebars without JavaScript)

Now let’s use CSS3 thing with a clever technique to have a dynamic stacking sticky sidebar design pattern.

现在，让我们结合使用CSS3和一项巧妙的技术来制作动态堆叠粘性侧边栏设计模式。

To reiterate, our goal is to:

重申一下，我们的目标是：

Have a sticky sidebar.
侧边栏有粘性。
Space out a bunch of them to show multiple items sticky separately.
隔开一堆，以单独显示多个项目。
Not use JavaScript.
不使用JavaScript。
Keep it simple.
把事情简单化。

First, here’s a demo of it working in action. This is 100% CSS:

首先，这是一个实际运行的演示。这是100％CSS：

https://codepen.io/ncerminara/pen/VdLmoe

这个怎么运作 (How it Works)

We know how to use CSS sticky and that it just affixes an element to the top and the bottom of it’s container based on scroll position.

我们知道如何使用CSS Sticky，它只是根据滚动位置将元素固定在容器的顶部和底部。

So all we need to do, is add a bunch of containers evenly split and put sticky content inside of them. See this blueprint of what we want to create with them marked container 1, container 2, container 3, and container n:

因此，我们需要做的就是添加一堆均匀分配的容器，并将粘性内容放入其中。请参阅此蓝图，了解我们要使用它们标记为container 1 ， container 2 ， container 3和container n ：

An easy trick to simulate the equal heights would be using position: absolute;. Here’s some sample code:

一个模拟等高的简单技巧是使用position: absolute; 。这是一些示例代码：

/* "TITLE HERE" from above */
.title-section {
    width: 100%;
    height: auto
}


/* "CONTENT" From Above */
.content-section {

     /* size of my container minus sidebar width */
    width: calc(100% - 300px);

    /* Estimated height of largest sidebar in case of short content */
    min-height: 800px;
}

/* SIDEBAR */
.sidebar-section {
    position: absolute;
    right: 0;
    top: 0;
    width: 300px;
    height: 100%; /* Super important! */
}

/* "SIDEBAR CONTAINER" in the blueprint */
.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 25%;

    /* Position the items */
    &:nth-child(2) { top: 25%; }
    &:nth-child(3) { top: 50%; }
    &:nth-child(4) { top: 75%; }
}

Then, the HTML:

然后， HTML ：

<article>
    <div class="container-fluid">
        <div class="col-md-12">

            <div class="title-section">
                <h1>TITLE HERE</h1>
            </div>

            <div class="inner-guts">


                <div class="content-section">
                    <h2>Content Section</h2>
                </div>


                <div class="sidebar-section">

                    <div class="sidebar-item">
                        <h3>Item 1</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 2</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 3</h3>
                    </div>
                    <div class="sidebar-item">
                        <h3>Item 4</h3>
                    </div>

                </div>


            </div>
        </div>
    </div>
</article>

And finally a demo:

最后是一个演示：

https://codepen.io/ncerminara/pen/zaGoPm?editors=1100#0

接下来，让我们粘起来 (Next, Let’s Make it Sticky)

Now, to make it sticky we just need that CSS property in each of the sidebar-items. So, add these lines of code:

现在，要使其具有粘性，我们只需要在每个sidebar-items具有该CSS属性。因此，添加以下代码行：

.make-me-sticky {
    position: sticky;
    top: 0;
}

<!-- Repeat this -->
<div class="sidebar-item">
    <div class="make-me-sticky">

    </div>
</div>

...

...

We’re just using position: absolute; to build the layout we want then position: sticky; to do all our work. Here is the blueprint live:

我们只是在使用position: absolute; 建立我们想要的布局，然后position: sticky; 去做我们所有的工作。这是现场设计图：

https://codepen.io/ncerminara/pen/VdLmoe

您将面对的问题 (Issues you’ll face)

Here are some issues that you might face with this approach:

使用此方法可能会遇到一些问题：

The content container is shorter than the sidebar.
内容容器比侧边栏短。
The sidebar items height are taller than their individual container.
侧栏项目的高度比其单独的容器高。
You have different quantities than 4 for your sidebar.
边栏的数量不同于4。

Nothing is perfect, but this is a pretty great technique. You’ll have to adjust the CSS here for your individual use case, but it’s not a bad solution at all given we have no JavaScript.

没有什么是完美的，但这是一个非常好的技术。您必须在此处针对您的个别用例调整CSS，但是鉴于我们没有JavaScript，这根本不是一个坏解决方案。

使它成为不同数量的帮助程序库/ Mixin (Make it a Helper Library / Mixin for Different Quantities)

For dynamically changing content, I would do something like this in CSS. You could probably make a smarter SASS / LESS Mixin though:

对于动态更改内容，我会在CSS中执行类似的操作。您可能可以制作更聪明的SASS / LESS Mixin：

.sidebar-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.has-4-items .sidebar-item {
    height: 25%;
    &:nth-child(2) { top: 25%; }
    &:nth-child(3) { top: 50%; }
    &:nth-child(4) { top: 75%; }
}
.has-3-items .sidebar-item {
    height: 33.333333%;
    &:nth-child(2) { top: 33.333333%; }
    &:nth-child(3) { top: 66.666666%; }
}
.has-2-items .sidebar-item {
    height: 50%;
    &:nth-child(2) { top: 50%; }
}

引导程序和Flexbox (Bootstrap and Flexbox)

In this example you’ll notice we used calc of exactly 300px for the sidebar width. This is because ad units are that size, so it’s become the standard on the web for a sidebar.

在此示例中，您会注意到我们使用的边栏宽度的calc精确为300px。这是因为广告单元就是这种尺寸，因此它已成为网络上侧边栏的标准配置。

With Bootstrap 4, their grid system is flexbox by default. The biggest for most users are columns of equal height by default with Bootstrap 4.

使用Bootstrap 4时，其网格系统默认为flexbox 。对于大多数用户而言，最大的是默认情况下与Bootstrap 4高度相等的列。

Check out this demo showing that:

查看此演示，该演示显示：

https://codepen.io/ncerminara/pen/EjqbPj

Now, let’s leverage that with sticky sidebars.

现在，让我们通过粘性侧边栏来利用它。

Instead of doing the calc trick, we’ll just use a Bootstrap 4 grid system. The only thing we need to update on our code is to make sure the .make-me-sticky has left and right padding that matches your column gutters.

除了执行计算技巧外，我们仅使用Bootstrap 4网格系统。我们唯一需要更新的代码就是确保.make-me-sticky具有与列.make-me-sticky匹配的左右填充。

So the default setup will be:

因此，默认设置为：

.make-me-sticky {
    position: sticky;
    top: 0;

    /* For Bootstrap 4 */
    padding: 0 15px;
}

Check out the demo below:

查看以下演示：

https://codepen.io/ncerminara/pen/zaGZGK?editors=1100

多个堆叠式粘边栏 (Multiple Stacking Sticky Sidebars)

Let’s do this in multiple columns at different quantities with just CSS.

让我们仅使用CSS在不同数量的多列中执行此操作。

https://codepen.io/ncerminara/pen/VdLpzd

结论 (Conclusion)

This was a tutorial on how to use position: sticky; with Bootstrap 4 to create multiple sticky sidebars or multiple, multiple sticky sidebars.

这是有关如何使用position: sticky;的教程position: sticky; 使用Bootstrap 4创建多个粘性侧栏或多个，多个粘性侧栏。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-build-multiple-stacking-sticky-sidebars-with-pure-css-and-bootstrap-4

bootstrap4侧边栏