Twitter Bootstrap Affixed Navbar - div下面跳起来 [英] Twitter Bootstrap Affixed Navbar - div below jumps up

问题描述

很难描述问题。所以，只要看看这个jsFiddle：

http://jsfiddle.net/xE2m7/

当导航栏固定到顶部时，内容会跳到下面。

CSS： / p>

  .affix {
 position：fixed; 
 top：0px; 
} 
＃above-top {
 height：100px; 
 background：black; 
} 
  

问题在哪里？

解决方案

这里的问题是没有办法传达到nav下面的容器中的其余内容，导航栏已经固定到顶部。你可以使用更现代的CSS，但要注意，这不会是一个修复旧的浏览器（确实有一些问题，你可能会发现与postion：旧的浏览器中的固定属性太...

  .affix + .container {
 padding-top：50px 
} 
  

这个等待直到导航栏固定，然后添加填充到容器，它是兄弟，避免跳跃导航下。 p>

Rather hard to describe the problem. So just look at this jsFiddle:

http://jsfiddle.net/xE2m7/

When the navbar gets fixed to the top the content jumps below it.

CSS:

.affix {
    position: fixed;
    top: 0px;
}
#above-top {
    height: 100px;
    background: black;
}

Where is the problem?

解决方案

The problem here is that there is no way communicated to the rest of the content in the container below the nav that the nav bar has been fixed to the top. You can achieve this using more modern CSS, but be aware that this won't be a fix for older browsers (and indeed there are issues you may find with postion:fixed properties in older browsers too...

.affix + .container {
    padding-top:50px
}

This waits until the nav bar is fixed, and then adds padding to the container that is it's sibling, keeping it from "jumping" under the nav.

这篇关于Twitter Bootstrap Affixed Navbar - div下面跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！