I'm trying to get a navbar that is placed at the very bottom of the page to be sticky at the bottom of the screen when it is scrolled out of view.
I have put the following attributes on the navbar:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-bottom="350">
And css:
.affix { bottom: 0; }
When scrolling down the page the navbar is sticky as it should be. When you reach the offset-bottom the class 'affix' should change to 'affix-bottom'. At this point the navbar starts flickering. When inspecting the DOM you can see that it switches the class affix/affix-bottom every pixel.
When using data-offset-top to achieve a top sticky navbar all works fine.
I can reproduce my issue on the w3schools example of the bootstrap affix plugin (don't forget to click 'run'): https://www.w3schools.com/code/tryit.asp?filename=FPAH8DBTOHUV
As you can see the navbar will start flickering when you scroll to the very end of the page. Any ideaus what is causing this strange behaviour?
Edit: There are a lot of threads about this issue but none of them really have a solution, or at least a solution that works in my w3schools example:
