Как я могу иметь 2 липких заголовка с динамическими значениями высоты

Question

Я хочу создать сайт с 2 липкими элементами в верхней части страницы. Липкий заголовок и липкая панель инструментов. Я использую Affix начальной загрузки для панели инструментов и sticky.js для заголовка.

Если я использую {topSpacing:0} для липкого заголовка, когда он "залипает", он перемещается за липкой панелью инструментов.

Если я использую {topSpacing:30} для липкого заголовка, когда он "залипает", он очень хорошо позиционирует себя для больших экранов, НО: Единственная проблема заключается в том, что на меньших экранах, где панель инструментов меняет высоту (становится выше, чем 30 пикселей в чтобы поместилось все содержимое внутри), липкий заголовок снова перемещается за липкой панелью инструментов.

Я хочу, чтобы липкий заголовок всегда был прикреплен ниже липкой панели инструментов, даже если высота панели инструментов составляет 0 или 10000 пикселей!

Это возможно?

Вот мой код:

//Sticky Top bar
$('#sp-top-bar').affix({
  offset: {
    top: 1,
    bottom: function () {
      return (this.bottom = $('.footer').outerHeight(true))
    }
  }
})

//Sticky Header
$(document).ready(function(){
    $("body.sticky-header").find('#sp-header').sticky({topSpacing:0})
});

Вот ссылка на проект: http://werstahl.ellevenacoustica.com/

Answer 1

Попробуйте установить topSpacing в $('#sp-top-bar').outerHeight()таким образом, верхний интервал всегда будет #sp-top-bar высота не имеет значения, какой размер экрана

$(document).ready(function(){
    $("body.sticky-header").find('#sp-header').sticky({topSpacing:$('#sp-top-bar').outerHeight()})
});

Answer 2

Почему бы не получить высоту динамически?

$("body.sticky-header #sp-header').sticky({topSpacing: $('#sp-top-bar).outerHeight()});

Answer 3

Спасибо вам обоим за помощь!

Просто для записи, это работает:

$(document).ready(function(){
      $("body.sticky-header").find('#sp-header').sticky({topSpacing: $('#sp-top-bar').outerHeight()})
   });

Единственная странная вещь - когда я обновляюсь, используя CTRL+ F5 в Mozilla, появляется разрыв между двумя элементами. Когда я обновляю обычно (без Ctrl или просто с помощью навигации), пропасть исчезает. Есть идеи по этому поводу?