Липкий заголовок поднимается на верх экрана в мобильном сафари - PullRequest
Новая
       14

Липкий заголовок поднимается на верх экрана в мобильном сафари

0 голосов
/ 05 января 2019

Я создаю сайт с липким заголовком. Когда вы начнете прокручивать заголовок, верхняя часть экрана поймает его и приклеит к верхней части экрана. Он будет следовать за вами после того, как вы прокрутите его. См. http://cupofjoseph.biz/index2.html для примера или см. Код ниже.

При прокрутке в Safari на iPhone 5 (держа телефон вертикально) липкий заголовок подпрыгнет до верхней части экрана, прежде чем его достигнет верхняя часть экрана.

Я бы хотел, чтобы липкий заголовок плавно прилипал к верхней части экрана, а не подпрыгивал.

Кто-нибудь знает, почему липкая навигация ведет себя так и что я могу сделать, чтобы это исправить?

Спасибо всем.

Это работает в Chrome на том же телефоне. Я столкнулся с другими проблемами в Safari, где высота окна может быть ошибочно оценена в 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 точно считывал высоту области просмотра в сафари на мобильном телефоне, а липкий заголовок должен прикрепляться плавно.

...