Keep footer sticked to bottom when scrolling outside of the page

Question

I have made a sticky footer which works greats when the page is not currently scrolled. But for the sake of animation safari and chrome (and maybe other) are moving my page beyond of its content. This is a feature to not stop abruptly the scroll when the end of the page is reach. Here what it look like .

How can I manage to hide the page's outside with my footer? I would like to have it gray, like my footer. But instead it is white and we can see my blue sidebar. This is really ugly.

Any idea ?

Edit :

here the Css I use to make it sticky

footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background-color: #434343;
    color: white;
    font-size: 12px;
    text-align: center;
    z-index:200;
}

I tried making it longer using margin-bottom negative, but the navigator scroll more the that just move the problem some pixel ahead.

And of course I don't want to have a fixed footer when I scroll. The issue is really beaucoup of the edge of the page. And the animation when it's reach.

Edit 2:

Here an sample code if you want to play with it

What I see when I scroll to much (I don't want that white part after the footer)

For those unfamiliar, if you reach the bottom of the page but "keep scrolling" you get this visual cue which indicates that you can't scroll any further (scrolling gets sluggish). Seems to be a browser/OS implementation. This seems relevant: https://stackoverflow.com/questions/44029176/on-safari-mobile-10-3-sticky-footer-can-be-scrolled-off-the-screen. — Chris, Jun 26 '18 at 11:37
@Chris yes indeed it seems to be related, but I don't see a direct solution for my issue — , Jun 26 '18 at 14:50

score 0 · Accepted Answer · answered Jun 28 '18 at 08:43

Here a solution. I made a simple and not really footer. But when I scroll it is almost impossible to see the white part after the blue div. Which was what I wanted.

The last questions are : is it optimal ? Can we do it without js ?

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //alert("you're at the bottom of the page");
        $('#footer').show();
    }
    else{
        $('#footer').hide();
    }
};

.footer{
  background-color:red;
  width:100%;
  height: 50px;
  display:none;
  position:fixed;
  bottom:0;
  z-index:-1;
}

.rectangle{
  background-color:blue;
  width:100%;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br><br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum justo ac tellus placerat, nec lacinia urna iaculis. Vestibulum eget tincidunt justo. Maecenas facilisis lectus at eros scelerisque, id bibendum risus gravida. Sed id ligula pharetra, lacinia nibh sit amet, ultrices tortor. Mauris vitae tortor rutrum, volutpat turpis sit amet, lobortis nunc. Pellentesque convallis est diam, sed vehicula lacus tempor ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="rectangle"></div>
<div id="footer" class="footer"></div>

Look at my answer now, did I get it right this time? – NoOorZ24 Jun 28 '18 at 10:05 — NoOorZ24, Jun 28 '18 at 10:05

score -1 · Answer 2 · answered Jun 26 '18 at 12:04

-1

Have you tried the below with the respective div or else share your code for better answer.

     position:fixed;
     bottom: 0;
     width: 100%;

answered Jun 26 '18 at 12:04

Bibek

47
1
2

I am sorry for not being clear but In my opinion you provided a fixed footer. Take a look at my code. – Jun 26 '18 at 14:52

Keep footer sticked to bottom when scrolling outside of the page

2 Answers2