Создание фиксированного заголовка и прокручиваемого содержимого

Question

Plz Я хочу спросить, как сделать следующее: - Исправлен фон для всех (содержимое &) >>> Я сделал это хорошо. - Исправлен заголовок, пока содержимое свитков >>> Я сделал это хорошо.

Но проблема в том, что я использую фиксированное фоновое изображение, а фиксированный заголовок прозрачен; когда страница прокручивается, содержимое появляется под заголовком (потому что это прозрачно) ..... Я попытался дать заголовку тот же фон тела, и он прошел хорошо на рабочем столе, но он выглядит ненормальным на iPad ! поэтому я прибегал к тому, чтобы сделать заголовок прозрачным, а затем проблема возникает.

<div class="myHeader"> 
    <header> 
     <a href="index.php"><img alt="" src="images/bigLogo.png"></a> 
    </header> 
    <nav> 
     <ul> 
      <li><a href="index.php">HOME</a> </li> 
      <li><a href="about.php">ABOUT</a> </li> 
      <li><a href="ceo.php">CEO</a> </li> 
     </ul> 
    </nav> 
</div> 

<div class="container"> 
    <p>bla bla bla long text here</p> 
</div> 


body { 
    background-color:#080717; 
    background-image: url('../images/fixedBG.jpg'); 
    background-position: top center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.myHeader { 
    position: fixed; 
    width: 100%; 
    display: block; 
    height: 255px; 
    top: 0px; 
    z-index: 1; 
    text-align: center; 
    margin: 0px auto 0px auto; 
} 

.container { 
    margin: 255px auto 0px auto; 
    text-align: left; 
    width: 541px; 
    position: relative; 
} 

Answer 1

IPad Fix

Mobile Safari (например, Chrome для Android, Mobile Firefox и IE Mobile) увеличивает размер шрифта широких блоков (в любое время), так что если вы дважды нажмите на масштабируйте этот блок (который соответствует блоку ширины экрана), текст будет разборчивым. Если вы установите параметр -webkit-text-size-adjust: 100% (или none), он не сможет этого сделать, и поэтому, когда пользователь удваивает масштаб, чтобы увеличить масштаб на больших блоках, текст будет нечетко малым; пользователи смогут прочитать его, если они защемляют увеличение, но тогда текст будет шире экрана, и им придется панорамировать по горизонтали, чтобы читать каждую строку текста!

В идеале вы исправите это с помощью методов адаптивного веб-дизайна, чтобы ваш дизайн адаптировался к размерам мобильных экранов (в этом случае у вас больше не будет очень больших блоков, поэтому мобильные браузеры больше не будут регулировать размер шрифта).

Наконец, если вам действительно необходимо, чтобы Mobile Safari не регулировал размеры шрифта, вы можете установить -webkit-text-size-adjust: 100%, но сделать это только в крайнем случае, поскольку это может привести к тому, что мобильные пользователи будут испытывают трудности с чтением текста, поскольку он будет либо слишком маленьким, либо ему придется кастрюлю из стороны в сторону после каждой строки, которую они читают. Обратите внимание, что вы должны использовать 100% не один, потому что ни у кого нет неприятных побочных эффектов в настольных браузерах. Существуют также эквивалентные настройки -moz-text-size-adjust и -ms-text-size-adjust для Mobile Firefox и IE Mobile.

Edit: например, в вашем случае самый простой, вероятно, вторая альтернатива, так что вы можете попробовать добавить следующий CSS:

/* Mobile browsers only */ 
@media only screen and (max-device-width: 480px) { 
    .newsletter_input { 
     width: 320px; 
    } 
    .newsletter_input #form{ 
     font-size:42pt 
    } 
} 

Хотя он не идеален Кодирую 320px, как это; вы можете улучшить это, используя разнообразные мультимедийные запросы CSS или получить ширину устройства от JavaScript. сильный текст

Scrollbar затруднительное

CSS Часть

Переполнение свойство должно быть установлено

.myHeader { 
    position: fixed; 
    width: 100%; 
    display: block; 
    height: 255px; 
    top: 0px; 
    z-index: 1; 
    text-align: center; 
    margin: 0px auto 0px auto; 
    overflow:scroll; 
} 

надеюсь, что это устраняет проблему