javascript - 我怎样才能有 2 个具有动态高度值的粘性标题

Question

我想创建一个在页面顶部有 2 个粘性元素的网站。粘性标题和粘性工具栏。我正在使用 Bootstrap 的 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()})
});