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=""></script>
<div id="nav">My nav</div>

Run code

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

1 answer

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;


I used this as a fallback for the fixed / js positioning on the iphone, for the same reason you did.



All Articles