CODEWITHSUNDEEP
javascriptcss
LordZardeck
LordZardeck

Reputation: 8293

How to have 2 fixed footers at the bottom of a page

I have an issue where I'm wanting to add a fixed bar at the bottom of a page. My issue arises when there is already a fixed bar at the bottom of the page. Is there any way with CSS and JavaScript to have my bar be placed at the very bottom and "push up" the previous bar to stack above it?

Upvotes: 0

Views: 51

Answers (2)

Rick Hitchcock
Rick Hitchcock

Reputation: 35680

This code searches for an existing footer (assuming fixed positioning and bottom 0).

If found, it makes it the first child of your footer (class myFooter).

It also changes the original footer to static positioning.

var obj = document.querySelectorAll('*'),
    myFooter= document.querySelector('.myFooter'),
    i,
    cs;

for(i = 0 ; i < obj.length ; i++) {
  cs= getComputedStyle(obj[i]);
  if(obj[i] !== myFooter &&
     cs.getPropertyValue('position')==='fixed' &&
     parseInt(cs.getPropertyValue('bottom'))===0
    ) {
    myFooter.insertBefore(obj[i],myFooter.firstChild);
    obj[i].style.position= 'static';
  }
}

Working Fiddle

Upvotes: 0

web-tiki
web-tiki

Reputation: 103810

The best way would be to nest those 2 elements in an other div and to give fixed positioning to the wrapper.

Upvotes: 1

Related Questions