Look at the original

Today, IN the development process, I encountered a fixed navigation, which slid and disappeared in ios devices. The navigation requirement is to always hover at the top of the page, no matter how the page slides.

The original code is as follows:

<div class="container"> <div class="back"> Return </div> <div> theme content </div> </div> <style>. Back {position: fixed; top: 0; left: 0; width: 100vw; height: 50px; text-align: center; } </style>Copy the code

The above code, under normal circumstances, can meet the requirements, but in iOS, when the drop-down refresh, probably because in iOS fixed content is relative to the window, not relative to the document, so the back navigation will disappear.

Transform :translate3d(0,0,0); I can do it. I can’t do it. Leave out HTML {overflow-x: hidden}. I don’t know if I’m doing it wrong, but I can’t. As a result, THE CSS solution didn’t work, so I used JS instead. My solution is as follows.

<div class="container">
   <div id="back" class="back"</div> </div> </div> <style>. Back {position: fixed; top: 0; left: 0; width: 100vw; height: 50px; text-align: center; } </style> <script> window.onscroll =function () {
  let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop < 0) {
     document.querySelector('#goback').style.position = 'absolute'
  } else {
    document.querySelector('#goback').style.position = 'fixed'
  }
 }
</script>
Copy the code

When the monitoring page drops down, change the fixed value to Absolute; Return to fixed when you slide up, and you’ve solved the problem.