Sticky floating footer that stops.

Hi there,

The sticky section will have to be hooked to generate_before_comments_container and it'll also need a script that checks if the comment section is about to enter viewport and make it stick there.

And this script will need to toggle a class to style between position: fixed; (for sticky) and position: relative; (for stopping) instead of using position: sticky; all the way.

Can you change the hook of the block element for sticky footer first? Also, add sticky-footer on it's HTML anchor.

And then try hooking this script this on the wp_footer of your page.

<script type="text/javascript">

window.addEventListener("scroll", event => {
    let fromTop = window.scrollY;
    let stickyFooter = document.querySelectorAll("#sticky-footer");
    let offset = stickyFooter.offsetHeight;
    let CommentsArea = document.querySelector('.comments-area');

        if ( document.readyState === 'complete' && CommentsArea.offsetTop <= fromTop + offset && CommentsArea.offsetTop + CommentsArea.offsetHeight > fromTop + offset ) {
            stickyFooter.parentNode.classList.add("sticky-mode");
        } else {
            stickyFooter.parentNode.classList.remove("sticky-mode");
        }
}

</script>

Let us know how it goes.

Ok, done.

Now it needs the css part... also there might be an error with the script. I see an console error?

For the script:

Try this instead:

<script>
window.addEventListener("scroll", event => {
    let FromTop = window.scrollY;
    let StickyFooter = document.querySelectorAll("#sticky-footer");
    let Offset = StickyFooter.OffsetHeight;
    let CommentsArea = document.querySelector('.comments-area');

        if (- document.readyState === 'complete' && CommentsArea.OffsetTop <= FromTop + Offset && CommentsArea.OffsetTop + CommentsArea.OffsetHeight > FromTop + Offset ) {
            StickyFooter.parentNode.classList.add('sticky-mode');
        } else {
            StickyFooter.parentNode.classList.remove('sticky-mode');
        }
    });
</script>

For the CSS, here's one:

.sticky-mode {
position: fixed;
top: unset !important;
bottom: 0;
}

Hmm, nothing is happening.

I see more consol errors, I have doubles checked – I have done as explained.

Maybe David has a solution or fix? :)

Hi there,

just to get a quick understanding.

What happens to the sticky footer when it reaches the comments ? - Should it just disappear ?

It should "stop" the floating and stay there

Hmmm.... ok. As the Sticky Footer needs to be full width.
Add the PHP Snippet Tom provides here:

https://generatepress.com/forums/topic/move-comments-section-before-the-footer/#post-1663535

That will make it and the comments full width ( which we can correct with some CSS ).
Once thats done can you remove the JS that Elvin provided so we can take a closer look.

Ok, great :)

Done that..

If it's easier / "more clean code" to make it disappear – that solution would be fine too.

Lets try this CSS to make the footer sticky:

#sticky-footer {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
}

And this CSS to contain the comments form:

.comments-area {
    max-width: 1200px;
    padding: 0 40px;
    margin: auto;
}

Awesome David – just awesome :)

Glad we could be of help!