Opencart - Как Закрепить Шапку Сайта При Прокрутке Страницы

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 21 окт 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    1.544
    Симпатии:
    16.081
    Репутация:
    114
    Всем привет. Сегодня посмотрел статистику поисковых запросов, по которым люди переходят на форум и обнаружил, что есть несколько совсем не релевантных. Нет, не форуму, а статьям.

    Один из них как зафиксировать шапку сайта? Я тут же решил исправить положение и написать статью, так как тема актуальная, и есть вопросы в данной области.

    Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться javascript, но я не очень силен в этой теме и только изучаю ее. Поэтому, пока, будем обходиться css. Слава Богу,зафиксировать шапку сайта (да и не только шапку, а любой другой элемент), можно "малой кровью" [​IMG]

    На самом деле, метод фиксации элемента при прокрутке страницы очень простой, и вы удивитесь, как просто решается данная проблема.

    Фиксация шапки при прокрутке страницы
    Для того, чтобы зафиксировать шапку, придется создать два блока. Один - для того, чтобы была возможность центрировать шапку. А в нем дочерний, который и будет фиксироваться. Начнем…

    Код:
    <div id="headerMain">
    
    <div id="header">
    
    </div>
    
    </div>
    Вот такая простая html структура! Теперь добавим стили!

    Код:
    #headerMain {
    width:920px;
    height: 195px;
    margin:0px auto;
    z-index:0;
    }
    
    #header {
    width:920px;
    height: 195px;
    background: url(../img/bg-header.jpg) no-repeat;
    position: fixed;
    z-index: 9999;
    }
    Теперь шапка будет зафиксирована вверху экрана и будет неподвижна при прокрутке.
     

    Вложения:

    • header.zip
      Размер файла:
      85,4 КБ
      Просмотров:
      4