我怎样才能拥有 2 个具有动态高度值的粘性标题答案

【问题标题】：How can i have 2 sticky headers with dynamic height values我怎样才能拥有 2 个具有动态高度值的粘性标题
【发布时间】：2015-08-20 18:41:47
【问题描述】：

我想在页面顶部创建一个包含 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

【问题讨论】：

标签： javascript jquery twitter-bootstrap sticky affix

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

为什么不动态获取高度？

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

【讨论】：

【解决方案3】：

感谢两位的帮助！

仅作记录，这是有效的：

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

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

【讨论】：