Question

我想在页面顶部创建一个包含2个粘性元素的网站。粘性标题和粘滞工具栏。我正在使用bootstrap的Affix作为工具栏，sticky.js作为标题。

如果我使用{topSpacing：0}作为粘性标题，当它“粘住”时会移动到粘性工具栏后面。

如果我使用{topSpacing：30}作为粘性标题，当它“粘住”时，它会非常适合大屏幕，但是：唯一的问题是，在较小的屏幕中，工具栏会改变高度（变得高于30px以便使其内部的所有内容都适合），粘性标题会再次移动到粘性工具栏后面。

即使工具栏的高度为0px或10000px，我希望将粘性标题始终粘贴在粘性工具栏下方！

这可能吗？

这是我的代码：

If you set async to true, they will all fire at the same time. 
make explicitly declaration of async = true option in each ajax call .
Useful jsfiddle link

    http://jsfiddle.net/jquerybyexample/tS349/

以下是该项目的链接：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

谢谢你的帮助！

只是为了记录，这有效：

ace of clubs
king of clubs
queen of clubs
jack of clubs
...

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

我怎么能有2个动态高度值的粘性标题

3 个答案: