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.
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. Let’s add some content and a footer first to the page. I am using the HTML tags and
Keep scrolling until you see the footer
Lorem ipsum dolor sit amet…
<! - wat meer alinea’s ->
Moving to CSS, remove any space around the
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;}
Apply the z-index: -1 rule to the footer om place it behind all other elements on the page.
Color both the
body, html {background-color: #fff;} footer {width: 100%; height: 200px; position: fixed; bottom: 0; background-color: # DD5632; z-index: -1;}
Set the margin-bottom of the
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.
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. First, let’s create a long article with a footer. To promote semantic code, I chose and <! - enkele paragrafen -> 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 with footer – Basic styles 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;} 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 background image with linear gradient and sticky 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.
Create CSS-only Sticky Footer: Tips and Tutorial: benefits
Faq
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.
