sticky div that disappers at the footer

Question

I build a newsletter sub box that is sticky to the bottom. I have at the bottom of the Site a static newsletter sub box. I want that when my sticky one reaches the one at the bottom that it floats under it and than disappers if its fully covered. I think for the solution I must use JavaSkript but I have no experience with it. It would be nice if someone can help me.

This is basicly my sticky newsletter sub box:

<div id="newsletter" class="m-newsletter_störer">
   <div class="m-newsletter_störer-container"> </div>
</div>

and the css:

.m-newsletter_störer {
    background:green;    
    max-width: 900px;
    margin: auto;
    position: sticky;
    bottom: 0;

&-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}

my static sub box:

<div id="newsletter" class="m-newsletter">
   <div class="m-newsletter-container"> </div>
</div>

and the css:

.m-newsletter {
    background: $green;

&-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
    display: flex;

    @include media('>phone') {
        padding: 3rem 1rem;
    }
}

Also I want that my sticky sub box appers after 10s on the page.

If you need anything else to help write a comment.

Answer 1

Im not amazing at JavaScript, but I implemented something similar a while back.

You can hide the sticky sub box when the users scroll position is near the bottom of the page.

$(window).scroll(function() {
   $("#newsletter").removeClass("viewport-bottom");
   if($(window).scrollTop() + $(window).height() > ($(document).height() - 400) ) {
       //Bottom of the page
       $("#newsletter").addClass("viewport-bottom");
   }
});

You can change the 400 value to be the height from the bottom of the page before the 'viewport-bottom' class is added.

Then just fade the opacity with css for that class.

Answer 2

为什么不试试 z-indexes 在粘性 tr 上放一个较低的 zindex，在页脚上放一个高的 zindex