How to make a position: fixed bar not to cover the footer?

[bendqh1]

I load the following HTML and CSS codes with JavaScript in each webpage.

A bar, fixed to the bottom of the viewport, does appear in each webpage, but it covers the footer region of my website.

Images

Footer covered

Footer uncovered (display: none)

Code

structure.js

document.body.insertAdjacentHTML('beforeend', `
	<aside dir="rtl" class="camovb_main_box">
		<div class="camovb_phone_box">
			<a class="camovb_phone_link" href="https://wa.me/NUMBER">
				<img class="camovb_phone_icon" src="/camovb/image.svg"></img>
				<span class="camovb_phone_text">שיחת וואטסאפ</span>
			</a>
		</div>
	</aside>
`)

style.js

newStyle = document.createElement("style");
newStyle.type = "text/css";
newStyle.innerHTML +=`
    .camovb_main_box {
        display: flex;
        flex-direction: row; /* column */
        justify-content: center;
        align-items: center;
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2147483647;
        width: 100%;
        height: 60px;
        overflow: hidden;
        text-align: center;
        text-decoration: none;
        font-size: 120%;
        font-weight: bold;
        color: #fff;
        background: #2a4b8d;
        text-shadow: 0 1px 0px rgb(0 0 0 / 18%);
    }
    .camovb_phone_box {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .camovb_phone_link {
        color: white !important;
        text-decoration: none !important; /* Fixes continuing line problem */
    }
    .camovb_phone_icon {
        width: 50px;
        height: 50px;
        vertical-align: middle;
    }
    .camovb_phone_text {
        vertical-align: middle;
    }
    @media screen and (min-width: 992px) {
        .camovb_main_box {
            display: none;
            /* flex-direction: row; */
        }
    }
`;
document.head.appendChild(newStyle);

[PaulOB]

That’s the problem with fixed positioned elements. They are removed from the flow and don’t care what’s in the way.

You would need to preserve the space at the bottom by either adding some padding bottom to the body element or some padding bottom to the last element in the page that matches the height of the fixed element. These are magic number fixes and not reliable if your footer changes height or content wraps.

I would suggest that you use position:sticky instead and then it will stick at the bottom but also allow content to scroll above it. The only downside is that if there is not enough content to fill the viewport then the footer won’t be at the bottom (because that’s the way that sticky works).

You can test it and see if you change this rule as follows.

.camovb_main_box {
  display: flex;
  flex-direction: row; /* column */
  justify-content: center;
  align-items: center;
  position: fixed;
  position:-webkit-sticky;
  position:sticky;
  bottom: 0;
  z-index: 2147483647;
  width: 100%;
  height: 60px;
  overflow: hidden;
  text-align: center;
  text-decoration: none;
  font-size: 120%;
  font-weight: bold;
  color: #fff;
  background: #2a4b8d;
  text-shadow: 0 1px 0px rgb(0 0 0 / 18%);
}

The footer does need to be a direct child of the body and the last in sequence to work in this context.