css页脚_如何创建仅CSS的粘性页脚

最新推荐文章于 2024-08-06 14:22:08 发布

cune1359

最新推荐文章于 2024-08-06 14:22:08 发布

阅读量927

点赞数

文章标签： css html python js java ViewUI

通常，我们需要JavaScript来执行与网页上不同用户操作相关的滚动效果 。该脚本负责跟踪向上滚动或向下滚动到一页的距离 ，并在达到阈值高度时触发动作 。

使用JavaScript滚动效果并不是一件坏事。实际上， 如果没有JavaScript ，则存在无法解决的更复杂的情况。但是，有些CSS hacks有时可以替换这些脚本。

这篇文章将向您展示如何使用CSS在页面滚动上创建页脚显示效果。 我们将使用两种用例进行演示：一种用于整个页面（请参阅演示），另一种用于单个页面元素（例如文章）。

完整页面

我们需要创建一个在用户向下滚动时从页面下方显示的页脚。同样，当他们向上滚动页面时，页脚也需要再次隐藏在页面下方。

为了实现这个目标，首先我们必须在屏幕底部创建一个固定位置的页脚。

1.创建一个固定的页脚

让我们先向页面添加一些内容和页脚 。我正在使用HTML标签<main>和<footer>来表示语义。但是， <div>也可以。

在我的演示中，页脚内部显示有蝙蝠图像，效果不太怪异，但是您可以选择其他任意图像。

<main>
  <h2>Keep scrolling till you see the footer</h2>
  <p>Lorem ipsum dolor sit amet...</p>
  <!-- some more paragraphs -->
</main>
<footer>
	<img src="bat.svg" width="100%">
</footer>

转到CSS，通过将margins设置为0来删除 <body>标记周围的所有空间 ，并通过添加自定义高度来引起滚动以使其足够长（如果页面中的主体内容足够长以致导致滚动，则不不必给它一个高度）。

给页脚指定一些尺寸（ width和height ），并通过以下位置将其位置 position: fixed;在屏幕底部position: fixed; bottom: 0; 属性。

body {
  font-family: Crimson Text;
  font-size: 13pt;
  margin: 0;
}
footer {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  background-color: #DD5632;
}

2.隐藏页脚

将z-index:-1规则应用于页脚，以便将其放置在页面上所有其他元素的后面 。

将<body>和<html>标记都涂成白色，以覆盖页脚 。

body, html{
	background-color: #fff;
}
footer {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  background-color: #DD5632;
  z-index: -1;
}

3.调整下边距

将<body>标记的下margin-bottom设置为等于页脚的高度 （在我的示例中为200px）。

这样，当用户向下滚动页面时，底部将有足够的空间使页脚可见。

body {
  height: 1000px;
  margin: 0;
  margin-bottom: 200px;
}

而已。整个页面的页脚显示效果已完成。查看下面的Codepen演示。

个别页面元素

此技术可用于足够长的单独HTML元素（带有页脚）以实现适当的页面滚动效果。该方法有点笨拙，因为它目前在Chrome和IE中不起作用，但回退率很高。

1.撰写长篇文章

首先，让我们创建一个带有页脚的长文章。为了推广语义代码，我选择了<article>和<footer> 。

<article>
    <h2>Article 1</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    <!-- some more paragraphs -->
    <footer></footer>
</article>

在下面，您可以看到文章和页脚的基本样式 。

article{
    width: 500px;
    background-color:#FEF9F3;
    padding: 20px 40px;
}
article>footer{
    height: 100px;
    background-color: #FE0178;
}
body{
    font-family: cormorant garamond;
}

我的文章目前看起来像这样。当然，您也可以使用其他基本样式规则。

2.使页脚发粘

以前的页脚已固定，此页脚将很粘。将foot position:sticky规则应用于页脚，因此它将在文章的边界内移动，但在用户上下滚动时仍保持其在屏幕上的位置。

article>footer{
    height: 100px;
    background-color: #FE0178;
    position: -webkit-sticky;
    position: sticky;
    bottom: 80px;
}

您可以根据自己的喜好调整其值，因为它确定了当用户向下或向上滚动时页脚开始出现或消失的位置。

article{
    width: 500px;
    background-color:#FEF9F3;
    padding: 20px 40px;
    margin-bottom: 80px;
}

3.添加部分透明的背景

现在，我们在文章底部的旁边需要一个开口，通过该开口我们可以看到粘性页脚上下滚动。

为此，请使用线性渐变 background-image替换文章的background-color ，该background-image从文章的顶部到页脚的顶部将用文章的背景色进行着色，其余部分则添加到底部变得透明 。

article{
    width: 500px;
    padding: 20px 40px;
    background-image:linear-gradient(
                  to bottom, #FEF9F3 calc(100% - 120px),
                  transparent 0);
    margin-bottom: 80px;
}

calc (100%-120px) CSS函数计算文章的完整高度减去页脚 。在我的示例中，它是120像素（高度为100像素，填充为20像素）。

4.将页脚放回

最后，让我们使用z-index: -1 CSS规则将页脚放在文章后面 。

article>footer{
    height: 100px;
    background-color: #FE0178;
    position: -webkit-sticky;
    position: sticky;
    bottom: 80px;
    z-index: -1;
}

就这样，具有滚动显示效果的单个页面元素就完成了。检查下面的Codepen笔。您也可以在我们的Github页面上找到这两种用例。