css - 停止固定定位的标题以重叠导航栏

Question

我有这样的事情：

<div id="navigation"></div>
<div id="header"></div>
<div id="content"></div>

有#header，"position:fixed; top: 0;"我需要它是这种方式，除非#navigation可见（不滚动），在这种情况下，#header应该在#navigation.

这可以用纯css完成吗？
或者任何干净的JS解决方案？

这是jsfiddle。

Answer 1

听起来像是 jQuery Waypoints 插件的工作：http: //imakewebthings.com/jquery-waypoints/

使用粘性元素快捷方式：

只需添加

$(document).ready(function() {
    $('#header').waypoint('sticky');
})

和卡住元素的样式

#header.stuck {
    position: fixed;
    top: 0;
}

这是更新的小提琴

Answer 2

这是一个使用 jQuery 的解决方案。

更新了 JSFiddle

//Checks if navigation is visible and sets position of header accordingly
function headerPosition(){
    if($('#navigation').is(':visible')){
        $('#header').css('position', 'static');
    }
    else{
        $('#header').css('position', 'fixed');
    }
}

//Run function to set correct header position
headerPosition();

//Show/Hide navigation to see function in action - not needed for production
$('button').on('click', function(){
   $('#navigation').toggle();
   headerPosition();
});