Hi,
sometimes on some screen sizes the page is flickering when I scroll down to the end.
This also means that I can never reach / click the bottom menu items.
It is the same when I use the scroll bar on the screen right side or the the scroll wheel on the mouse.
E.g. page impressum with a height from 538px.
I delete the footer to test, if it happens also without. And it is happent also with out the footer.
It is happend only, when the upper navigation reaches the top end and in the same time the bottom end is on the edge (bottom) of the screen.
I believe your issue is related to the scroll spy. Your body element should have data-spy="scroll" on it and you should remove data-spy="affix" from your nav element.
The next issue is the added class .padding_margin_0 it is messing with the proper function of the col grid system.
Also you're using the grid system incorrectly, there is not a class for col-sm-0 http://getbootstrap.com/css/#grid
To try and do some of the "col" tricks you're trying, you would use the offset variable.
Such as in your footer you need to remove the 2 div cols that have the class col-sm-0 they are useless.
Change div with the classes class="col-sm-12 col-md-10 col-lg-8" to class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2".
Those cols aren't working/spacing correctly because of your added class .padding_margin_0.
If I use Chrome's Dev Tools (F12) I can disable that class and I don't get the flicker when in mobile mode on the page http://www.heartholz-moebel.de/kontakt.php.
Thank you very much for your precious tips and help!
I changed every thing like you suggested
except removing data-spy="affix" from the nav-element.
I would like to keep the navigation permanently in the view.
At the beginning it should be below te big logo on top,
while scrolling down it should stick on the top end of the browser-window.
This why I need the data-spy="affix" in the nav-element.
I don't know any other solution to realize that.
But so it is still flickering.
Yup, sorry I was confusing the ScrollSpy and the Affix. My bad ;) You shouldn't need the data-spy="scroll" on the body then.
Ok, so I see you removed the class in question. However, you also changed the height of the jumbotron. The point I was trying to show had you just removed the class, your flickering would stop on the page I had linked.
Since you made these changes I have re-looked at the page http://www.heartholz-moebel.de/kontakt.php and I think it has re-affirmed my suspicions that the issue mainly pertains to the fact that this seems to only happen on pages that are not long enough. Meaning not enough content to have enough space for the nav to become affixed. This causes the nav to go into affix and then right back out again. Here is why. The nav is in a relative position meaning it's taking up space in the natural flow of the content, this is normal. When it goes into affix mode it's no longer taking up space in the natural flow of the content, this is also normal but it's the cause of your issue. What happens is the content collapses into the now missing space that your nav used to fill. Making the height of the document shorter then it initially was. That then causes the page to not have the scroll space you defined on the nav causing it to go back to a non-affixed state.
I'm not sure how well your JS skills are but you might have to write a bit of script code that detects when the nav changes classes to .affix-top that you then apply (I'd say) padding-top to #content that is the height of the nav.
Or you can just try adding a min-height to #content that gives enough space so the nav it work correctly.
A min-height: 738px; on #content seems to do the trick for me, any less and it will start flickering again. I'm not sure on different media query sizes though, you'll have to play around with the Dev Tool(F12) for Chrome.