Can we do this fixed footer in Blocs?

Hi, is there any way that we can do this fixed footer in Blocs? When I use Muse I could done this. But in Blocs I couldn’t find anyway… :upside_down_face:
https://www.malindoair.com/

Hello @ril1 check my website if it is what you need:

LINK

1 Like

Hey… this is sticky on the top of all other contents. I was searching like that link. (Sticky bottom of all other contents)

I’m not a coder - not brainy enough for that - but would it be a simple matter of adding a z-index to @Pealco code?
Over to someone with brains, just a suggestion.

Just wait 5 minutes please…

Almost, the problem is adding only z-index you only pass the content to the back, and it disappears from the end of the page.

But probably is this what you need…

TRY IF IS THIS WHAT YOU NEED?

If so you need to do the following:

  1. In the end create a bloc with the footer content and add a class: “sticky_footer” (is the class I add in my example)

  2. You have to add to the page a padding in the end with the same height of the footer, and for that in page preferences you need to add this code (in my example is 220px, change it for whatever):

    body{
      padding-bottom:220px;
    }
  1. And finally you have to tell the system that the footer bloc is behind everything (z-index), is sticky (position fixed) to end of the page (bottom) and have a height of 220px (my example) and for that the code is something like this:
.sticky_footer {
   position: fixed;
    height:220px;
    width: 100%;
    bottom: 0px;
    float: left;
    clear: both;
    z-index: -100;
   }

In the end all code is:

<style>
body{
  padding-bottom:220px;
}

.sticky_footer {
   position: fixed;
    height:220px;
    width: 100%;
    bottom: 0px;
    float: left;
    clear: both;
    z-index: -100;
   }
</style>

Hope it helps you…

5 Likes

Nice! :slight_smile:

SUPER AMAZING!!! :100: :+1: :clap:

Way to go @Pealco! Did you add this code to your page of Snippets?

I will but with all the problems that I’m facing with blocs I’m waiting for the upgraded version from @Norm.

1 Like

Nice work @Pealco,

1 Like

Thank you @Malachiman

So @Pealco, I have automated the height of the Body padding based on the height of the footer.

It doesn’t work well on small breakpoints though. At this stage the only way I have figured out how to do that well is disable this for the smaller breakpoints.

I have one question, I have always had trouble getting window resize listeners working properly. Do you know how I could apply that to the javascript here? The footer padding-bottom should update when the window resizes.

Header

<style>
@media (min-width: 768px) { 
.stickyfooter {
   position: fixed;
    width: 100%;
	bottom: 0;
    float: left;
    clear: both;
    z-index: -100;
   }
}  
</style>

Footer - either make the ID of your footer “stickyfooter” or change it in the code to match the ID of your footer.

<script>
$(document).ready(function(){ 
 var ms = window.matchMedia("screen and (max-width:768px)").matches;  // Set Min Screen Size
 var footer = document.getElementById("sickyfooter");    // Get Footer from ID
 var footerpad = footer.offsetHeight;              // Get height of Footer 
	
// Check Screen Size
  if (ms) {
    document.body.style.paddingBottom = '0px';  // Make Padding to Body 0
  }
  else {
    document.body.style.paddingBottom = footerpad + 'px';    // Add Padding to Body
  }
 })
</script>

Hello @Malachiman I use a different approach check please:

  1. Create the footer bloc and give it the id: footer (this is my example)

  2. Give it the class: sticky_footer (this is my example)

  3. Add css properties to sticky_footer be stick to the bottom:

.sticky_footer {
   position: fixed;
    width: 100%;
    bottom: 0px;
    float: left;
    clear: both;
    z-index: -100;
   }
  1. Add code to system check the height of the footer bloc and add that height in padding bottom of the entire page:
$("body").css({"padding-bottom": $("#footer").height() });

The #footer is the ID of the footer bloc (you can change for whatever ID you have.

Resuming this is the code inside page settings code:

<script>
document.addEventListener("DOMContentLoaded", function() {
	$("body").css({"padding-bottom": $("#footer").height() });
});
</script>

<style>
.sticky_footer {
   position: fixed;
    width: 100%;
    bottom: 0px;
    float: left;
    clear: both;
    z-index: -100;
   }
</style>

And it works very well in small breakpoints…

Try it please…

1 Like

It works well, but it doesn’t work on smaller breakpoints on larger footers (if your footer in larger then the screen height on smaller devices).

Same issue I had with my method. Which is why I have it disabling on small screens. Which is fine for the use I using.