Design a sticky footer that only sticks after complete scroll down

Design help General
1

Hi Webflow community,

I’m trying to make my footer sticky but only after users have completely scrolled down the page. So that my footer sticks on the page if people decide to scroll back up. Is this possible within the editor? Or otherwise, what kind of custom code are we looking for here? Can I build that with limited coding experience?

Here’s what I’ve been trying so far:

[https://preview.webflow.com/preview/manuss-first-project?utm_medium=preview_link&utm_source=designer&utm_content=manuss-first-project&preview=7762445b045f6e3e9d31d8886c89a74f&mode=preview]

Many thanks in advance!

2

Hello,

i cant try it but it should work :wink:

<script>

window.onscroll = function(ev) {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    document.getElementsByClassName("Section5").style.position = "fixed";
}
};

</script>

Now just fix your Footer to the bottom and it should do what you want :smiley: Hopefully :stuck_out_tongue:

1 Like
3

Thanks so much for even trying. You’re the best!

Sorry for the noob question: But am I supposed to add this to the header or to the footer in the settings menu? Because then I’m not sure it works.

Regards,
Manus

4

Add it in the Footer but its not so important where you add it…

The fix the footer to the bottom with a width of 100% just select the Class „Section5“ select „Fixed“ and pin it to the bottom. So in the designer it should now stays at the bottom of the screen. Then select „Static“ so it only gets fixed with the script…

If it doesnt work let me know :wink:

1 Like
5

OK i just tested it and it doesnt work :wink: But i am trying to find a solution… :wink:

1 Like
6

Thanks heaps for your efforts!!

Maybe it’s the fact that we put style position to “fixed” but we don’t seem to assign a position in this code you wrote?

7 
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
  
  <script type="text/javascript" language="javascript">
         $(function () {
             var $win = $(window);
  					 var element = document.getElementById("Footer");
             $win.scroll(function () {
                 if ($win.height() + $win.scrollTop() == $(document).height()) {
                 element.style.cssText += "position: fixed; top: auto; bottom: 0px;"; 
                 }
             });
         });
    </script>
1 Like
8

Give the Footer the ID “Footer” and i should work now for real :smiley: I just tested it :smiley:

Read Only Code is on the page home inside the body tag :wink:

9

You shouldn’t need to import jQuery again, Webflow brings that in by default. Just an FYI.

1 Like
10

@Matzinger, wow yes it works :blush:

If you go to this link: http://manuss-first-project.webflow.io/ After we scroll to the bottom, you see it instantly jump up onto the 4th column of the previous section. Is there any fix for this also? So that it remains still after you scroll to the bottom?

And is there any way I can repay you? :smile:

@sam-g, thanks - I removed the Jquery part of the code!

11

Yeah there is a fix for that… You could add the height of the footer as margin to the last section… So if the footer gets fixed the last section gets a bottom margin of the height of the footer…

Add: (under var element…)
var element2= document.getElementById(“HERE_ID”);

(under element.style.css…)
element2.style.cssText += “margin-bottom: 150px”; <— Here height of the Footer

I am on my mobile phone so cant test it :wink:

@sam-g Thanks! Didn’t know that :wink:

12

This is what I work with now:

  • ID of the section below the footer is ‘skills’
  • the footer height is approx 80px.

If I run this code the footer doesn’t seem to fix anymore somehow. Any idea’s?

<script type="text/javascript" language="javascript">
         $(function () {
             var $win = $(window);
  					 var element = document.getElementById("Footer");
                                        var element2 = document.getElementById("skills");
             $win.scroll(function () {
                 if ($win.height() + $win.scrollTop() == $(document).height()) {
                 element.style.cssText += "position: fixed; top: auto; bottom: 0px;"; 
                 element2.style.cssText += "margin-bottom: 80px";

                 }
               
             });
         });
    </script>
13

Did you have any error-reports in your browser if you go into the dev mod of your browser?

14

Looks like I made a mistake somewhere. Seems to be working almost perfect now, although a little bit buggy. Not sure what it is exactly but let me play around with the margins a little bit more!

Anyways, thanks so much :blush:

edit: oh it’s not buggy when I log out of webflow to view the page incognito. WOW :slight_smile: This is amazing.

1 Like
15

Nice to here that it works :wink:

Yeah that editor overlay is sometimes strange :sweat_smile:

16

Hey Matzinger,

Any idea’s on how to make this margin work on all devices? Currently the banner is really neat on desktop but it was buggy on somebodies iPad and on my iphone (8+) yesterday. Buggy as in: the same issue where the footer ‘pops up’ after scroll down and takes up space of the previous section.

I tried working with a VH margin bottom but that brings up other issues and doesn’t seem to solve the problem.

Let me know if you have ideas :slight_smile:

17

If you give the Footer a height of for example 20VH and a bottom margin of 20VH it should work…

18

Mmm yes this is what I’m trying but it seems like on Ipad / Iphone the trigger for it to stick is delayed a little bit, which causes a slightly buggy feel. Afterwards, the margin-bottom doesn’t seem to work as the sticky footer moves up too far on the previous section.

Could it be that on IOS devices the trigger works differently? Or that on some devices Javascript loads synchronically with pageload and therefor there is a delay? IDK…

If you use mobile and go to www.growth.nl, does it work fluently?