Question

我正在建立一个带有粘性标题的网站。当您开始滚动浏览标题时，屏幕顶部将抓住它并将其粘贴到屏幕顶部。滚动过去后，它将跟随您。有关示例，请参见http://cupofjoseph.biz/index2.html或参见下面的代码。

在iPhone 5上的Safari中滚动（垂直握住手机）时，粘贴式标题会在屏幕顶部到达屏幕顶部之前跳到屏幕顶部。

我想使粘性标头无缝地粘在屏幕顶部，而不是向上跳转。

有人知道粘性导航仪为什么会这样，我该怎么做？

谢谢。

此功能可在同一部手机的Chrome中使用。我在野生动物园遇到了其他问题，在Safari中可能会错误地评估车窗高度，所以这就是我目前的建议。它应该比屏幕顶部下降90％，但看起来更像是95％。我可能是错的

jQuery(function($) {
  function fixDiv() {
    var $cache = $('#getFixed');
    if ($(window).scrollTop() > (.90*document.documentElement.clientHeight))
      $cache.css({
        'position': 'fixed',
        'top': '0vw',
		'margin-top': '0vw'
      });
    else
      $cache.css({
        'position': 'absolute',
        'top': 'auto',
		'margin-top': '90vh',
		'margin-bottom': '-90vh',
      });
  }
  $(window).scroll(fixDiv);
  fixDiv();
});

<!DOCTYPE html>
<html lang="en" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
      <link rel="stylesheet" href="css/style2.css">

<div id="getFixed">
	<div>
		<div style="float: left; display: inline-block; z-index: 1; width: 100%;text-align: center; padding: 0; "><a href="#section1"><h3>Link</h3></a></div>

	</div>
  </div>
    <script  src="js/index4.js"></script>

  
  

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>



</html>

目标是Javascript可以准确地在移动设备上的safari中读取视口的高度，并且粘性标头应无缝连接。

粘性标题可跳至Mobile Safari中的屏幕顶部

0 个答案: