Question

我想知道处理这个问题的最佳方法是什么：我在文档流程中有两个div（导航+内容），定位为relative。

在某些情况下，我需要将导航设为fixed位置。由于这会从流中删除导航，因此内容div不再正确位于下方。我可以添加一些top-margin来补偿内容，但这必须计算，因为导航没有设置高度（在我的例子中，它是窗口高度的50％）。

有什么建议吗？

JSFiddle：http://jsfiddle.net/6gkVS/

Answer 1

计算数字并应用于其他地方的最佳方法是javaScript，因为在加载DOM之后你必须找到这个数字。

我要说的是，截至（这个日期）你不应该使用固定定位而不测试与modernizr的接触，并且仅在它是“无接触”的情况下使用固定的，到期的在移动和支持触摸的桌面上支持足够的浏览器。在商店试一试，你会明白我的意思。到处都是跳跃怪异的固定标题。

你的div是相对的这一事实并不重要。

最好的办法是运行modernizr。它将在您的html上吐出一个无法触摸的类，您可以使用它来设置样式。

.no-touch nav {
    position: fixed;
    top: 0; left: 0;
}

然后使用jQuery，你可以沿着这些方向做一些事情 - 如果你使用box-sizing：border-box（我建议）比你想要使用'.outerHeight（）'确保包含填充和边界。当屏幕大到足以容纳它时，你也只需要一个固定的标题。

var windowHeight = $(window).height();
var navHeight = $('nav').outerHeight();

if ( windowHeight > 600 ) {
   $('nav').addClass('fixed-nav');
   $('section').css('margin-top', navHeight); 
}

这是a fiddle.我希望有所帮助。抱歉，还没有办法用CSS做到这一点。那会很酷。

在从相对位置切换到固定位置时保持CSS流的外观

1 个答案: