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/

使用sticky element shortcut：

添加

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

和卡住元素的样式

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

以下是updated fiddle

Answer 2

这是使用jQuery的解决方案。

Updated 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();
});

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

2 个答案: