How to remove fixed side banner from footer

Question

Hello,

I’m trying to make the side banner stop before standing over the footer as picture below, but I could not find a way to make this stay fixed on the side of the page and not stand over the footer of the page.

HTML code:

<section class="noticia">

    <header>
        <h1>titulo noticia</h1>
    </header>

    <article>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non mauris mi. Sed a ullamcorper massa. Nulla sed efficitur odio, id porttitor mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut porttitor tincidunt magna, at molestie libero pretium a. Duis placerat pretium fermentum. Mauris facilisis, erat ac accumsan ultrices, nunc mauris blandit risus, at venenatis ipsum ipsum ut lectus. In ac rhoncus felis. Suspendisse facilisis convallis condimentum. Donec volutpat lorem nec neque commodo luctus. Donec tempor facilisis varius.</p>
    </article>
    <div class="fixo">
        <img src="images/imagem300x250.png"/>
    </div>
</section>

CSS code:

.fixo {
    z-index: 99;
    position: fixed;
    top: 380px;
    left: 75%;
    display: inline-block;
}

Answer 1

Do it like this div that gets fixed you put a top of 100% - the height of itself and the height of the footer. It would be something like top: calc(100% - (altura div fixa + altura do footer) ). For this you use a function of calc() css I left it commented in the code.

The cool thing about this technique is that it doesn’t matter how tall the screen is div fixed will never cover up the footer

Follow the image code above:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.fixo {
    z-index: 99;
    position: fixed;
    /* 200 é 100px da altura do footer e 100px da própria div fixa */
    top: calc(100% - 200px); 
    left: 75%;
    display: inline-block;
}
article {        
    height: 100vh;
    background-color: silver;
}
footer {
    height: 100px;
    background-color: red;
}

<section class="noticia">
    <header>
        <h1>titulo noticia</h1>
    </header>
    <article>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis animi quo nulla! Autem magnam doloremque animi, dolorem hic impedit laboriosam reprehenderit debitis perferendis deleniti dignissimos nostrum, et, culpa sequi ducimus.
    </article>

    <div class="fixo">
        <img src="https://placecage.com/100/100">
    </div>
    
</section>

<footer>
    footer
</footer>