极客教程如何使用HTML CSS和JavaScript在网页上创建粘性头部/页脚
在设计网站时，考虑到粘性头部和页脚是很重要的。这些元素通过保持重要的导航链接可访问，当用户滚动时提升用户体验。本文探讨了使用CSS创建粘性头部和页脚。
我们可以通过以下CSS属性来实现
- Position: sticky; 是一种CSS属性，它使元素根据用户滚动位置在相对定位和固定定位之间过渡。这个属性通常用于粘性头部或导航菜单，确保它们在页面滚动过程中可见且可访问，从而提升用户体验并保持导航一致。
- Position: fixed; 是一种CSS属性，它将一个元素相对于浏览器窗口（视口）进行定位，并在滚动时保持在该位置固定。它将元素从正常的文档流中移除，确保它不会受到滚动或布局变化的影响。固定元素在视口内的精确位置是通过
top、bottom、left或right属性确定的。
语法： 为了创建一个 粘性头部 ，可以使用CSS的position和top属性。
.header {
position: sticky;
}
粘性页脚 就像粘性头部一样，但有所不同。
.footer {
position: fixed;
}
方法一：使用CSS
这段HTML和CSS代码构建一个具有粘性页眉和固定页脚的网页。CSS样式建立了布局：粘性页眉具有导航菜单和固定页脚显示版权文字。内容区域有底部间距来容纳粘性页脚。页眉保持在顶部，而页脚固定在底部。这种基本方法专注于使用CSS进行布局和定位。为了实现动态页脚大小，可以引入JavaScript以根据内容高度和窗口大小调整页脚的行为。
示例： 在此示例中，我们使用了上述解释的方法。
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Create Sticky Header/Footer on a Web Page
using HTML CSS and JavaScript
</title>
<style>
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position: sticky;
top: 0;
text-align: center;
background-color: lightgray;
padding: 20px;
}
.navigation ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navigation li {
display: inline;
margin-right: 10px;
}
.navigation a {
text-decoration: none;
color: #333;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: lightgray;
padding: 10px;
text-align: center;
}
.content {
margin-bottom: 100px;
}
</style>
</head>
<body>
<header class="header">
<h1>Sticky Header</h1>
<nav class="navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#js">JavaScript</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2 style="text-align: center;" id="html">
HTML
</h2>
<p>
HTML stands for HyperText Markup Language.
It is used to design the web pages. With
the help of HTML, you can create a complete
website structure. HTML is the combination
of Hypertext and Markup language. Hypertext
defines the link between the web pages and
markup language defines the text document
within the tag that define the structure
of web pages.
</p>
<h2 style="text-align: center;" id="css">
CSS
</h2>
<p>
CSS (Cascading Style Sheets) is used to
styles web pages. Cascading Style Sheets
are fondly referred to as CSS. The reason
for using this is to simplify the process
of making web pages presentable. It allows
you to apply styles on web pages. More
importantly, it enables you to do this
independently of the HTML that makes up
each web page.
</p>
<h2 style="text-align: center;" id="js">
JavaScript
</h2>
<p>
JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled
programming language. It is also known as
the scripting language for webpages. It is
well-known for the development of web pages,
and many non-browser environments also use it.
JavaScript is a weakly typed language (
dynamically typed). JavaScript can be used
for Client-side developments as well as
Server-side developments. JavaScript is both
an imperative and declarative type of language.
JavaScript contains a standard library of
objects, like Array, Date, and Math, and a
core set of language elements like operators,
control structures, and statements.
</p>
</div>
<footer class="footer">
<p>© 2023 GFG. All rights reserved.</p>
</footer>
</body>
</html>
输出：
方法二：使用JavaScript
HTML结构包含一个带有导航链接的标题，一个包含大块文本的主内容区域部分，以及一个展示版权声明的页脚。CSS文件包含了网页的布局定义。它指定了标题、页脚和内容部分等关键元素的可视外观。这些样式规则有助于创建一个吸引人的网站设计。JavaScript利用了两个函数的模块化。其中一个函数叫做toggleStickyClass，负责根据滚动位置和给定的偏移值管理元素的添加或删除‘sticky’类。另一个函数handleScroll通过调用toggleStickyClass来确保粘性元素的正确行为，这样，在用户滚动时，标题和页脚元素都会得到处理。
语法:
header.classList.toggle('sticky', isPastHeader);
footer.classList.toggle('sticky', isPastFooter);
例子2： 在这个例子中，我们使用了上面解释的方法。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Using JavaScript</title>
</head>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
header,
footer {
background-color: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #fff;
}
nav a:hover {
color: red;
}
main {
padding: 20px;
}
section {
background-color: #e6e6e6;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}
footer {
position: fixed;
bottom: 0;
width: 100%;
}
.sticky {
position: sticky;
top: 0;
z-index: 100;
}
p {
text-align: center;
}
</style>
<body>
<header class="sticky">
<nav>
<ul>
<li><a href="#html">HTML</a></li>
<li><a href="#css">CSS</a></li>
<li><a href="#Js">JavaScript</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h1 style="color: green; text-align: center;"
id="html">
HTML
</h1>
<p>
HTML stands for HyperText Markup Language.
It is used to design the web pages. With
the help of HTML, you can create a complete
website structure. HTML is the combination
of Hypertext and Markup language. Hypertext
defines the link between the web pages and
markup language defines the text document
within the tag that define the structure
of web pages.
</p>
<h1 style="color: green; text-align: center;"
id="css">
CSS
</h1>
<p>
CSS (Cascading Style Sheets) is used to
styles web pages. Cascading Style Sheets
are fondly referred to as CSS. The reason
for using this is to simplify the process
of making web pages presentable. It allows
you to apply styles on web pages. More
importantly, it enables you to do this
independently of the HTML that makes up
each web page.
</p>
<h1 style="color: green; text-align: center;"
id="Js">
JavaScript
</h1>
<p>
JavaScript is a lightweight, cross-platform,
single-threaded, and interpreted compiled
programming language. It is also known as
the scripting language for webpages. It is
well-known for the development of web pages,
and many non-browser environments also use it.
JavaScript is a weakly typed language (
dynamically typed). JavaScript can be used
for Client-side developments as well as
Server-side developments. JavaScript is both
an imperative and declarative type of language.
JavaScript contains a standard library of
objects, like Array, Date, and Math, and a
core set of language elements like operators,
control structures, and statements.
</p>
</section>
</main>
<footer class="sticky">
<p>© 2023 Geeksforgeeks. All rights reserved.</p>
</footer>
<script> const header = document.querySelector('header');
const footer = document.querySelector('footer');
const headerOffset = header.offsetTop;
const footerOffset = footer.offsetTop;
function handleScroll() {
if (window.pageYOffset >= headerOffset) {
header.classList.add('sticky');
} else {
header.classList.remove('sticky');
}
if (window.pageYOffset >= footerOffset - window.innerHeight) {
footer.classList.add('sticky');
} else {
footer.classList.remove('sticky');
}
}
window.addEventListener('scroll', handleScroll);
</script>
</body>
</html>
输出：
