Create CSS-only Sticky Footer: Tips and Tutorial

Full page demo

Hello friends today we gonna learn about Create CSS-only Sticky Footer: Tips and Tutorial. So read this article, Create CSS-only Sticky Footer: Tips and Tutorial step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: Create CSS-only Sticky Footer: Tips and Tutorial

Normally we need JavaScript to run scroll out effects related to different user actions on web pages. The script does the job keep track of how far up scrolling down or down takes one page, and triggers an action when reaching a threshold height.

It’s not exactly a bad thing to use JavaScript for scrolling effects. In fact, there are more complicated cases impossible to solve without JavaScriptBut there are CSS hacks which can sometimes replace these scripts.

This post will show you how to create footer-revealing effects when scrolling pages with CSS. We will use two use cases to demonstrate this: one for the whole page (see demo) and one for individual page elements, such as articles.

back to menu ↑

Full page

We need to create a footer appears from below the page while the user scrolls down. Even when they scroll the page back up the footer must are hidden again below the page.

To achieve this goal, we must first create a footer with fixed position at the bottom of the screen.

1. Create a solid footer

Let’s add some content and a footer first to the page. I am using the HTML tags

and

for semantics.

however also works.

My demo shows a bat image in the footer for a not so spooky effect, but you can choose any other image you like.

back to menu ↑

Keep scrolling until you see the footer

Lorem ipsum dolor sit amet…

Moving to CSS, remove any space around the tag through set margins to 0, and keep it through long enough add a custom height to induce scrolling (if the body content on your page is long enough to cause scrolling, you don’t need to give it height).

Enter some dimensions (width and height) for the footer, and fix its position to the bottom of the screen with the position: fixed; and below: 0; properties.

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

2. Hide the footer

Apply the z-index: -1 rule to the footer om place it behind all other elements on the page.

Color both the as the tags white cover the footer

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

3. Adjust the bottom margin

Set the margin-bottom of the tag in equal to the height of the footer (in my example 200px).

This way there is enough space at the bottom for the footer To Be Visible when the user scrolls down.

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

That is it. The revealing effect of the footer for a full web page is complete. Watch the Codepen demo below.

See the Pen Page Footer Reveal (Pure CSS) by Compsmag (@hkdc) on CodePen.

back to menu ↑

Individual page elements

This technique can be used for an individual HTML element (with a footer) that is long enough for a good page scroll effect. The method is a bit hacky, as it doesn’t work in Chrome and IE right now, but it has quite a setback.

1. Create a long article

First, let’s create a long article with a footer. To promote semantic code, I chose and

.

Below you can see the basic styling of the article and footer.

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

My article currently looks like this. Of course you can also use other basic style rules.

Article and footerArticle with footer – Basic styles

2. Make the footer sticky

The previous footer has been fixed, it goes to be stickyApply the position: sticky rule to the footer so that it moves within the boundaries of the article, but still maintain his position on the screen while the user scrolls up and down.

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

The bottom: 80px line defines the position of the footer 80px above the bottom of the article

You can adjust its value to your liking as it determines the point where the footer begins to appear or disappear as the user scrolls down or up

Give the the same value for the bottom margin of the itemso there is enough space at the bottom to show the full footer.

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

3. Add a partially transparent background

Now we need an opening next to the bottom of the item allowing us to see the pasted footer scroll down and up

To accomplish this, replace the item’s background color with one linear gradient background-image, which is from the top of the article to the top of the footer colored with the background color of the article, and the remainder is towards the bottom made transparent

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

Thecalc (100% -120px) CSS function calculates the full height of the article minus the footerIn my example it is 120px (100px for height & plus; 20px for padding).

Article with Sticky Footer and Liner-Gradient BackgroundArticle with background image with linear gradient and sticky footer

4. Replace the footer

Let’s conclude place the footer behind the article using the z-index: -1 CSS rule.

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

And that’s it, the individual page element with the on-scroll reveal effect is ready. Check out the Codepen pen below. You can also find both use cases on our Github page.

See the Pen Footer Reveal in Elements (Pure CSS) by Compsmag (@hkdc) on CodePen.

back to menu ↑

Create CSS-only Sticky Footer: Tips and Tutorial: benefits

  • The Create CSS-only Sticky Footer: Tips and Tutorial tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the Create CSS-only Sticky Footer: Tips and Tutorial guide is free.

back to menu ↑

Faq

Tutorial summary of Create CSS-only Sticky Footer: Tips and Tutorial

In this guide, we told you about the Create CSS-only Sticky Footer: Tips and Tutorial; please read all steps so that you understand Create CSS-only Sticky Footer: Tips and Tutorial in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the Create CSS-only Sticky Footer: Tips and Tutorial, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the Create CSS-only Sticky Footer: Tips and Tutorial tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide Create CSS-only Sticky Footer: Tips and Tutorial. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the Create CSS-only Sticky Footer: Tips and Tutorial, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “Create CSS-only Sticky Footer: Tips and Tutorial”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide Create CSS-only Sticky Footer: Tips and Tutorial, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart