When designing a website, it’s essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS.
We can do this by using the following CSS properties
- Position: sticky; is a CSS property that enables an element to transition between relative and fixed positioning depending on the user’s scroll position. This property is commonly used for sticky headers or navigation menus, ensuring their visibility and accessibility throughout the page scroll, thus enhancing the user experience with consistent navigation.
- Position: fixed; is a CSS property that positions an element relative to the browser window (viewport) and keeps it fixed in that position while scrolling. It removes the element from the normal document flow, ensuring it remains unaffected by scrolling or layout changes. The precise location of the fixed element within the viewport is determined using the `top`, `bottom`, `left`, or `right` properties.
Syntax: To make a sticky header, CSS position, and the top property can be used.
.header {
position: sticky;
}
Sticky footers are like sticky headers, but with differences.
.footer {
position: fixed;
}
Approach 1: Using CSS
This HTML and CSS code constructs a web page with a sticky header and fixed footer. The CSS styles establish the layout: a sticky header with a navigation menu and a fixed footer displaying copyright text. The content area has a bottom margin to accommodate the sticky footer. The header remains at the top, while the footer is fixed at the bottom. This basic approach focuses on CSS for layout and positioning. To achieve dynamic footer sizing, JavaScript could be introduced to adapt the footer’s behavior based on content height and window size.
Example: In this example, we are using the above-explained approach.
<!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 >
|
Output:
Approach 2: Using JavaScript
The HTML structure consists of a header featuring navigation links, a main content area section encompassing substantial text, and a footer that showcases a copyright notice. The CSS file contains definitions for the layout of a webpage. It specifies the visual appearance of key elements such as the header, footer, and content section. These style rules contribute to creating an appealing design for the website. JavaScript utilizes modularization with two functions. One of these functions, known as toggleStickyClass, is responsible for managing the addition or removal of the ‘sticky’ class for elements based on both the scroll position and an offset value provided. The other function, handleScroll, ensures the proper behavior of sticky elements by invoking toggleStickyClass for both header and footer elements when users scroll.
Syntax:
header.classList.toggle('sticky', isPastHeader);
footer.classList.toggle('sticky', isPastFooter);
Example 2: In this example, we are using the above-explained approach.
<!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 >
|
Output: