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

Question

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

在某些情况下，我需要给导航一个固定的位置。由于这从流中删除了导航，因此内容 div 不再位于下方。我可以在内容中添加一些 top-margin 来补偿，但这必须进行计算，因为导航没有设置高度(在我的示例中，它是窗口高度的 50%)。

有什么建议吗？

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

Answer 1

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

我只想说，从(这个日期)开始，你不应该在没有测试 modernizr 触摸的情况下使用固定定位，并且只有在它是“无触摸”的情况下才使用 fixed，因为在移动和支持触摸的桌面上，浏览器支持不足。在商店试一试，你就会明白我的意思了。到处都是跳动的怪异固定 header 。

您的 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 来做到这一点。那会很酷。