Как объединить слайд-панели с липким заголовком?

Question

В настоящее время я работаю над CSS на основе расположения 3-колонки, которая имеет следующие требования:

• На рабочем столе ...
  • ... все столбцы отображаются.
• На мобильных устройствах ...
  • ... только средний столбец показан.
  • ... левый столбец может скользить влево, вызванный ударом или нажатием на кнопку.
  • ... правая колонка может сдвигаться справа, вызванная салфеткой или нажатием на кнопку.
• Независимо от устройства ...
  • ... средний столбец содержит три строки: Основной, заголовок к югу, и фактический контент.
  • ... главный прокручивается при прокрутке вниз.
  • ... Подсвечник липкий в верхней части экрана при прокрутке вниз.

Теперь я пытался осуществить это:

• Создание макета с 3-колонки и скрытие левый и правый столбцы легко, используя Bootstrap.
• С тремя рядами в средней колонке тоже легко.
• Чтобы сделать подзаголовок липкий, у меня есть два варианта:
  • Используйте position: sticky (лучшее решение в техническом плане, но не поддерживается любым браузером).
  • Используйте сценарий, прикрепите к событию scroll и измените его на position: fixed по запросу. Это то, что Bootstrap предлагает OOTB с его плагином affix. Используя этот плагин, это тоже непростая задача.
• Создание двух боковых панелей и их скользящих элементов также легко, используя что-то вроде Snap.js.

Проблемы начинаются, когда я хочу, чтобы объединить липкую подзаголовок с раздвижными боковыми панелями: affix плагин просто перестает работать, и подзаголовок не липнет больше. В основном проблема сводится к проблемам с CSS transform и position: fixed, см. Eric Meyer's awesome blog post on this и this answer.

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

Как я могу это решить? Это вообще возможно?

Answer 1

Рассмотрим этот пост:. Applying snap.js to my main content wrapper seems to break *some* of my jQuery functions

бутстрэпами affix.js слушает $ (окно) .На («свитка» ... событие Snap.js кажется изменить прокручивать элемент из «окна» элемент к элементу, в который вы добавили класс «snap-content». Я не вижу другого решения для написания липкой функциональности, предоставленной самим загрузкой.

Используйте это как ссылку. На основе текущей позиции прокрутки (в пикселей) вы можете добавить атрибуты css или даже целые классы css в элемент, который вы хотите сделать липким:

jQuery(document).ready(function ($) { 
$('.snap-content').scroll(function() { 
    if ($(this).scrollTop() > 140) { 
     if ($("#navbar").css('position') !== 'fixed') { 
      $("#navbar").css("position", "fixed"); 
     } 
    } else { 
     if ($("#navbar").css('position') !== 'static') { 
      $("#navbar").css("position", "static"); 
     } 
    } 
}); 

});