我怎样才能有 2 个具有动态高度值的粘性 headers

Question

我想创建一个页面顶部有 2 个粘性元素的网站。粘性 header 和粘性工具栏。我正在为工具栏使用 bootstrap 的 Affix，为 header.

如果我使用 {topSpacing:0} 作为粘性工具栏 header，当它 "sticks" 时它会移动到粘性工具栏后面。

如果我将 {topSpacing:30} 用于粘性 header，当它 "sticks" 时它会很好地定位自己以适应大屏幕，但是 : 唯一的问题是，在较小的屏幕上，工具栏会改变高度（变得高于 30px 以适应其所有内容），粘性 header 再次移动到粘性工具栏后面。

我希望粘性 header 到始终粘在粘性工具栏下方，即使工具栏的高度为 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})
});

这里是一个link项目：http://werstahl.ellevenacoustica.com

Answer 1

为什么不动态获取高度呢？

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

Answer 2

尝试将 topSpacing 设置为 $('#sp-top-bar').outerHeight()，这样无论屏幕大小如何，顶部间距始终为 #sp-top-bar 高度

$(document).ready(function(){
    $("body.sticky-header").find('#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()})
   });

唯一奇怪的事情是，当我在 mozilla 中使用 CTRL+f5 刷新时，两个元素之间出现了一个空隙。当我正常刷新时（不用 Ctrl 键或简单地浏览），间隙就会消失。有什么想法吗？

我怎样才能有 2 个具有动态高度值的粘性 headers

How can i have 2 sticky headers with dynamic height values

javascript

jquery

sticky

twitter-bootstrap

affix