Сделать липкий заголовок веб-страницы в Safari на iPad

Я хочу сделать липкий заголовок, как этот url: http://www.cssplay.co.uk/layouts/fixit.html сделал! Но поместите этот url на Safari iPad, он также не сможет исправить заголовок.Сделать липкий заголовок веб-страницы в Safari на iPad

Кто-нибудь знает, как сделать липкий заголовок на iPad Safari?

Заранее благодарен!

источник

2010-08-20 Scott Chu

На самом деле все, что вам нужно для решения этой проблемы для устройств IOS (IPAD, iPhone и т.д.), чтобы добавить следующие строки в CSS:

#container { 
    position:fixed; 
    top:120px; 
    bottom:0px; 
    overflow:auto; 
}

Этот пример предполагает, что:

часть, которую вы хотите прокрутки начинает 120px ниже вашего заголовка (то есть заголовок будет 120px высокий)
ДИВ вы хотите иметь прокрутки имеет идентификатор = «контейнера»
вы будете использовать 2 пальца для прокрутки. Если вы используете один палец, заголовок будет перемещаться.

Это действительно здорово на iPad, поскольку оно дает пользователю выбор (перемещайте все это или удерживайте заголовок видимым с помощью одного или двух пальцев). Он также работает для нижних колонтитулов (изменить нижнее значение).

Наконец, обратите внимание, что это для браузеров «Apple» (я успешно протестировали его на IPad и Mac Safari и Chrome), так что если вы хотите, чтобы поддержать что-то еще, вам придется создавать различные коды, используя что-то вроде:

if (navigator.userAgent.match("Apple") == null) { 
    /* use a different container id */ 
}

Редактировать от 7 октября 2011 г.: Thx to chris-barr.com Я нашел это решение. Просто добавьте этот код:

<script> 
function touchScroll(id){ 
    var el=document.getElementById(id); 
    var scrollStartPos=0; 

    document.getElementById(id).addEventListener("touchstart", function(event) { 
     scrollStartPos=this.scrollTop+event.touches[0].pageY; 
     event.preventDefault(); 
    },false); 

    document.getElementById(id).addEventListener("touchmove", function(event) { 
     this.scrollTop=scrollStartPos-event.touches[0].pageY; 
     event.preventDefault(); 
    },false); 
} 
</script> 

<body onload="touchScroll('container')">

и он будет работать в прошивкой (iPhone, IPad) И Android только одним пальцем !!!

источник

2011-08-18 10:17:18 DrMadder

Решение CSS теперь работает на iOS5, но скорость прокрутки замедляется. Это проблема iPad Safari? –

Кажется, что если я сделаю фиксированный заголовок, по умолчанию щелчок и дрожание касаются жестов, когда прокрутка Safari исчезла и вызывает чувство «лаги» от пользователя pov. –

Хорошая вещь с веб-страницами заключается в том, что вы всегда можете легко проверить исходный код.

Посмотрите на исходный код страницы, и вы увидите #header в разделе CSS определения

position:fixed;

, а также размеры и другие инструкции форматирования.

источник

2010-08-20 09:37:29 Eiko

Как я уже сказал в своем вопросе, даже этот url не может исправить заголовок на Safari на iPad. –

It * есть * исправленный. Вы можете прокручивать содержимое под ним двумя пальцами. При перемещении заголовка вы не прокручиваете, а перемещаете * всю страницу * на фоне Safari. – Eiko

О! действительно! Я попробую еще раз! Большое спасибо! –

Сделать липкий заголовок веб-страницы в Safari на iPad

ответ

Смежные вопросы