{"id":28185,"date":"2016-10-11T23:01:31","date_gmt":"2016-10-11T15:01:31","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=28185"},"modified":"2025-04-04T00:03:04","modified_gmt":"2025-04-03T16:03:04","slug":"css-only-on-scroll-reveal","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-only-on-scroll-reveal\/","title":{"rendered":"How to Create CSS-only Sticky Footer"},"content":{"rendered":"

Normally, we need JavaScript to perform scrolling effects<\/strong> related to different user actions on web pages. The script does the job of tracking how far up or down scrolling takes a page<\/strong>, and triggers an action<\/strong> when a threshold height is reached.<\/p>\n

It\u2019s not particularly a bad thing to use JavaScript for scrolling effects. In fact there are more complicated cases that are impossible to solve without JavaScript<\/strong>. However there are CSS hacks<\/strong> that can replace these scripts at times.<\/p>\n

This post is going to show you how to create footer reveal effects on page scroll using CSS. <\/strong>We will be using two use cases to demonstrate this: one for the entire page (see demo) & one for individual page elements, such as articles.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHTML5 Basic Elements: Header, Nav, and Footer<\/a>\n\t\t\t\t<\/p>\n

\"Full<\/figure>\n

Full Page<\/h2>\n

We need to create a footer that appears from beneath the page<\/strong> while the user is scrolling down. Also, when they are scrolling the page back up the footer needs to be hidden<\/strong> beneath the page again.<\/p>\n

To achieve this goal, first we have to create a footer with fixed position<\/strong> at the bottom of the screen.<\/p>\n

1. Create a Fixed Footer<\/h3>\n

Let\u2019s add some content and a footer<\/strong> to the page first. I\u2019m using the HTML tags <main><\/code> and <footer><\/code> for semantics. However, <div><\/code> works as well.<\/p>\n

In my demo, there\u2019s a bat image shown inside the footer for a not-so spooky effect, but you can choose any other image you like.<\/p>\n

\r\n<main>\r\n  <h2>Keep scrolling till you see the footer<\/h2>\r\n  <p>Lorem ipsum dolor sit amet...<\/p>\r\n  <!-- some more paragraphs -->\r\n<\/main>\r\n<footer>\r\n\t<img src=\"bat.svg\" width=\"100%\">\r\n<\/footer>\r\n<\/pre>\n
Moving to CSS, remove any space<\/strong> around the <body><\/code> tag by setting margins to 0<\/strong>, and make it long enough by adding a custom height<\/strong> to induce scrolling  (if the body content in your page is long enough to cause scrolling, you don\u2019t have to give it a height).<\/p>\n
Give some dimensions (width<\/code> and height<\/code>) to the footer, and fix its position<\/strong> to the bottom of the screen with the position: fixed;<\/code> and bottom: 0;<\/code> properties.<\/p>\n
\r\nbody {\r\n  font-family: Crimson Text;\r\n  font-size: 13pt;\r\n  margin: 0;\r\n}\r\nfooter {\r\n  width: 100%;\r\n  height: 200px;\r\n  position: fixed;\r\n  bottom: 0;\r\n  background-color: #DD5632;\r\n}\r\n<\/pre>\n
2. Hide the Footer<\/h3>\n
Apply the z-index:-1<\/code> rule to the footer in order to place it behind all other elements<\/strong> on the page.<\/p>\n
Color both the <body><\/code> and <html><\/code> tags white in order to cover the footer<\/strong>.<\/p>\n
\r\nbody, html{\r\n\tbackground-color: #fff;\r\n}\r\nfooter {\r\n  width: 100%;\r\n  height: 200px;\r\n  position: fixed;\r\n  bottom: 0;\r\n  background-color: #DD5632;\r\n  z-index: -1;\r\n}\r\n<\/pre>\n
3. Adjust the Bottom Margin<\/h3>\n
Set the margin-bottom<\/code> of the <body><\/code> tag equal to the height of the footer<\/strong> (in my example 200px).<\/p>\n
This way there will be enough space at the bottom for the footer to be visible<\/strong> when the user scrolls down the page.<\/p>\n
\r\nbody {\r\n  height: 1000px;\r\n  margin: 0;\r\n  margin-bottom: 200px;\r\n}\r\n<\/pre>\n
That\u2019s it. The footer reveal effect for a full web page is done. Check out the Codepen demo below.<\/p>\n