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

【问题标题】：Preserving the appearance of CSS flow while switching position from relative to fixed在从相对位置切换到固定位置时保留 CSS 流的外观
【发布时间】：2014-03-11 05:20:29
【问题描述】：

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

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

有什么建议吗？

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

【问题讨论】：

如果你使用 jQuery 来切换类，为什么不计算固定元素的高度并通过 JavaScript 为另一个元素设置适当的边距呢？只是为了演示吗？
是的，我可以这样做，但如果有人能想到纯 html+css 解决方案，我宁愿避免这样做。
所以你总是希望两者都是 50% 的高度？
这是一个动态的固定标题...但我发现页面加载之间导航的问题，它跳跃了一点：codepen.io/sheriffderek/pen/gabJr 这是另一个固定标题，只有在modernizr 时才会启动检测到没有触摸：codepen.io/sheriffderek/pen/qKLIo
- 不是答案...但有些事情要考虑。

标签： html css css-position

【解决方案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 做到这一点。那会很酷。

【讨论】：