How to Create CSS-only Sticky Footer

Normally, we need JavaScript to perform scrolling effects associated to opposite user actions on web pages. The book does a pursuit of tracking how distant adult or down scrolling takes a page, and triggers an action when a threshold tallness is reached.

A Look Into HTML5 Basic Elements: header, nav footer

A Look Into HTML5 Basic Elements: header, nav footer

[series_html5css3] HTML5 growth is not finish yet. But, there a few new elements in HTML5 that can be…Read more

It’s not quite a bad thing to use JavaScript for scrolling effects. In fact there are some-more difficult cases that are impossible to solve though JavaScript. However there are CSS hacks that can reinstate these scripts during times.

This post is going to uncover we how to emanate footer exhibit effects on page corkscrew regulating CSS. We will be regulating dual use cases to denote this: one for a whole page (see demo) one for particular page elements, such as articles.

Full Page DemoFull Page Demo

Full Page

We need to emanate a footer that appears from underneath a page while a user is scrolling down. Also, when they are scrolling a page behind adult a footer needs to be hidden underneath a page again.

To grasp this goal, initial we have to emanate a footer with bound position during a bottom of a screen.

1. Create a Fixed Footer

Let’s add some calm and a footer to a page first. I’m regulating a HTML tags main and footer for semantics. However, div works as well.

In my demo, there’s a bat picture shown inside a footer for a not-so scary effect, though we can select any other picture we like.

main
  h2Keep scrolling compartment we see a footer/h2
  pLorem ipsum grief lay amet.../p
  !-- some some-more paragraphs --
/main
footer
	img src="bat.svg" width="100%"
/footer

Moving to CSS, remove any space around a body tab by setting margins to 0, and make it prolonged adequate by adding a tradition height to satisfy scrolling (if a physique calm in your page is prolonged adequate to means scrolling, we don’t have to give it a height).

Give some measure (width and height) to a footer, and fix a position to a bottom of a shade with a position: fixed; and bottom: 0; properties.

body {
  font-family: Crimson Text;
  font-size: 13pt;
  margin: 0;
}
footer {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  background-color: 
}
2. Hide a Footer

Apply a z-index:-1 sequence to a footer in sequence to place it behind all other elements on a page.

Color both a body and html tags white in sequence to cover a footer.

body, html{
	background-color: 
}
footer {
  width: 100%;
  height: 200px;
  position: fixed;
  bottom: 0;
  background-color: 
  z-index: -1;
}
3. Adjust a Bottom Margin

Set a margin-bottom of a body tab equal to a tallness of a footer (in my instance 200px).

This approach there will be adequate space during a bottom for a footer to be visible when a user scrolls down a page.

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

That’s it. The footer exhibit outcome for a full web page is done. Check out a Codepen demo below.

Individual Page Elements

This technique can be used for an particular HTML component (with a footer) that’s long enough for a correct page corkscrew effect. The process is a bit hacky, as it now doesn’t work in Chrome and IE, though it has a decent fallback.

1. Create a Long Article

First, let’s emanate a prolonged essay with a footer. To foster semantic code, we chose article and footer.

article
    h2Article 1/h2
    pLorem ipsum grief lay amet.../p
    !-- some some-more paragraphs --
    footer/footer
/article

Below we can see a basic styling of a essay and a footer.

article{
    width: 500px;
    background-color:
    padding: 20px 40px;
}
articlefooter{
    height: 100px;
    background-color: 
}
body{
    font-family: cormorant garamond;
}

My essay now looks like this. Of march we can use other simple character manners as well.

Article and FooterArticle and Footer

Article with Footer – Basic Styling
2. Make a Footer Sticky

The prior footer was fixed, this one is going to be sticky. Apply a position:sticky sequence to a footer, so it will pierce inside a bounds of a essay though still maintain a position on a shade while a user is scrolling adult and down.

articlefooter{
    height: 100px;
    background-color: 
    position: -webkit-sticky;
    position: sticky;
    bottom: 80px;
}

The bottom:80px sequence fixes a position of a footer 80px above a bottom of a article.

You can adjust a value to your taste, given it determines a indicate where a footer starts to seem or disappear while a user is scrolling down or up.

Give a same value for a bottom domain of a article, so that there will adequate space during a bottom to exhibit a full footer.

article{
    width: 500px;
    background-color:
    padding: 20px 40px;
    margin-bottom: 80px;
}
3. Add a Partially Transparent Background

Now we need an opening subsequent a bottom of a article by that we can see a gummy footer scrolling down and up.

To grasp this, reinstate a background-color of a essay with a linear gradient background-image, that from a tip of a essay to a tip of a footer is colored with a credentials color of a article, and a remaining apportionment to a bottom is made transparent.

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

Thecalc(100%-120px) CSS duty calculates a full tallness of a essay reduction a footer. In my example, it’s 120px (100px for tallness plus; 20px for padding).

Article with Sticky Footer and Liner-Gradient BackgroundArticle with Sticky Footer and Liner-Gradient Background

Article with Linear-Gradient Background Image Sticky Footer
4. Place a Footer Back

Finally, let’s place a footer behind a article regulating a z-index: -1 CSS rule.

articlefooter{
    height: 100px;
    background-color: 
    position: -webkit-sticky;
    position: sticky;
    bottom: 80px;
    z-index: -1;
}

And that’s it, a particular page component with a on-scroll exhibit outcome is done. Check out a Codepen coop below. You can also find both use cases on our Github page.

Add Comment