# Изжоги.нет

Проект изжоги.нет

Demo (opens new window)

Главная страница информационного сайта об изжоге. Адаптивная верстка с мобильным меню и "липкой" боковой колонкой.


# Стэк технологий

    # Фичи

      # Структура проекта

      /css
      /fonts
      /img
      /js
      /scss
      index.html
      

      # Семантичная разметка

      При разметке этой страницы использованы семантические теги для улучшения SEO и чтения страницы скринридерами.

      ...
      
      	<header class="header pt-3 pb-3">
      		...
      	</header>
      
      	<main class="airSticky_stop-block">
      		<!-- Left sidebar -->
           <aside class="col mb-lg-3 mt-1">
           	...
           </aside> <!-- end popArticles -->
      
           ...
      
          <!-- Hero -->
          <section class="hero">
          	...
          </section> <!-- end hero -->
      
          ...
      	</main>
      
      	<footer class="bg-primary footer">
      		...
      	</footer>
      
      ...
      

      Source: /src/index.html

      # Адаптивность

      Изжога для мобильных

      Простота реализации адаптивности этой страницы достигнута за счет использования CSS-фреймворка Bootstrap. Хотя внешне код, созданный с применением этой технологии выглядит не лаконично, однако Bootstrap позволяет очень быстро доставить заказчику готовый продукт.

      # Адаптивное меню

      Адаптивность меню полностью реализуется средствами Bootstrap. Это стандартный navbar бутстрапа, идущий из коробки.

      # Липкая боковая колонка

      Реализована при помощи jQuery плагина airSticky. Скрипты подключаются перед закрывающим тегом body и вызываются после загрузки страницы.

      jQuery(document).ready(function($){
          window.onload = function() { 
              $('.airSticky').airStickyBlock({
                  offsetTop: 30
              });
          };
      });
      

      Source: /src/index.html

      Изначально была идея использовать для боковой колонки свойство position: sticky. Однако от нее пришлось отказаться ввиду того, что на странице есть пара секций с контейнером и бэкграундом на всю ширину. Чтобы sticky работал, "липкий" сайдбар должен находиться внутри элемента к которому он "прилеплен".

      # Исходный код на GitHub

      Izzhoga (opens new window)