How to make relative position work as fixed position on iPhone?
I have a top navigation bar that I anchor to the top with JavaScript.
$(window).scroll(function() {
$('#nav').css({top: $(window).scrollTop()});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">My nav</div>
I have a problem with my iPhone because when I scroll down the navigation disappears and after that when I lift my finger from the touchscreen the navigation appears again.
I tried to use events touchstart
, touchmove
and touchend
to switch between fixed / relative position for my navigation, but that still doesn't work correctly. (The thing is, when I do not touch the screen with my finger, the navigation should be relative)
Is there any other way to fix this problem without using it position: fixed
?
source to share
Your navigation disappears on scrolling because on touch devices it only calculates the scrollTop when you release the scroll. The same thing happens with js handled sticky navs. You tried
position :sticky;
top:0;
I used this as a fallback for the fixed / js positioning on the iphone, for the same reason you did.
source to share