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

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

  1. TopicStarter Overlay
    Offline

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

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

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

    Вообще, существует несколько способов того, как закрепить шапку сайта при прокрутке страницы. Можно воспользоваться 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 КБ
      Просмотров:
      14
    aleksandr.1008, Инна, Kefir и 6 другим нравится это.
  2. Offline

    Egor1983 Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  3. Offline

    Цапыч Пользователь

    Сообщения:
    8
    Симпатии:
    1
    Репутация:
    0
    спасибо. в header.tpl внедрять?
     
  4. Offline

    cccaofan Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    пасиб, выручил
     
  5. Offline

    alex88 Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  6. Offline

    spy-007 Пользователь

    Сообщения:
    115
    Симпатии:
    129
    Репутация:
    35
    В дополнение к инструкции Админа.
    Реализовал на чистом JS для [lowenet.biz]. Кросбраузерка!
    Вставляем в любом месте
    HTML:
    <script>
    
    let head = document.querySelector('header');
    function topHeight() {
        /* полная высота nav и это же для скролера*/
        let top = getComputedStyle(document.getElementById('top'));
        return parseInt(top.height) + parseInt(top.marginTop) + parseInt(top.marginBottom);
    }
    function headHeight() {
        let cont = getComputedStyle(head);
        return parseInt(cont.height) + parseInt(cont.marginTop) + parseInt(cont.marginBottom) + 'px';
    }
    window.onscroll = function() {
    let block = document.querySelector('body>.container');
          if (window.pageYOffset > topHeight()) {
                head.classList.add('scroll');
                block.style.marginTop = headHeight(); // чтоб не прыгал container
            }else {
                head.classList.remove('scroll');
                block.style.marginTop = '0';
          }
        }
    </script>
    В css добавляем только это
    HTML:
    header.scroll {
        position: fixed;
        padding-top:20px;
        z-index: 3;
        background-color: #fff;
        border-bottom: solid 1px #8e8e8e;   
        left: 0;
        right: 0;
        top: 0;
        -moz-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }
    
    PS: сделал под стандартную тему, но и под остальные подойдет (может прийдется класы переименовывать)
     
    admin нравится это.
  7. Offline

    kilshik Пользователь

    Сообщения:
    12
    Симпатии:
    1
    Репутация:
    0
    спасибо
     
  8. Offline

    Инна Пользователь

    Сообщения:
    7
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  9. Offline

    MEhmet SEzgi Пользователь

    Сообщения:
    3
    Симпатии:
    0
    Репутация:
    0
    thanks friend
     
  10. Offline

    Sparjuk Пользователь

    Сообщения:
    14
    Симпатии:
    2
    Репутация:
    0
    Спасибо!