Twitter的引导粘贴式导航栏 - div的下面跳起来(Twitter Bootstrap Af

2019-07-20 20:14发布

相反很难说明问题。 所以,单看这的jsfiddle:

http://jsfiddle.net/xE2m7/

当导航栏被固定在顶部的内容跳到下方。

CSS:

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

问题出在哪儿?

Answer 1:

这里的问题是,有没有办法传达给在导航下面的容器的导航栏已经固定在顶部的其余内容。 你可以用更现代的CSS实现这一点,但要注意,这不会是旧版本浏览器修复(确实也有可能与现在的位置发现的问题:在旧的浏览器固定属性太...

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

这也是在等待,直到导航栏是固定的,然后添加填充到这是它的兄弟姐妹,从“跳楼”的导航下保持它的容器。



Answer 2:

您还可以使用引导贴上事件增加,并通过CSS类中删除从相关元素填充(或保证金):

// add padding or margin when element is affixed
$("#navbar").on("affix.bs.affix", function() {
  return $("#main").addClass("padded");
});

// remove it when unaffixed
$("#navbar").on("affix-top.bs.affix", function() {
  return $("#main").removeClass("padded");
});

这里有一个的jsfiddle: http://jsfiddle.net/mumcmujg/1/



Answer 3:

我的解决方案,通过@ niaccurshi的启发:

而不是硬编码填充顶,创建占用空间相同的金额,但仅在原始元素贴一个无形的重复元素。

JS:

var $submenu = $(".submenu");

// To account for the affixed submenu being pulled out of the content flow.
var $placeholder = $submenu.clone().addClass("affix-placeholder");
$submenu.after($placeholder);

$submenu.affix(…);

CSS:

.affix-placeholder {
  /* Doesn't take up space in the content flow initially. */
  display: none;
}

.affix + .affix-placeholder {
  /* Once we affix the submenu, it *does* take up space in the content flow. But keep it invisible. */
  display: block;
  visibility: hidden;
}


Answer 4:

另一种,如果你想避免重复的内容。

<script>
    jQuery(document).ready(function(){
        jQuery("<div class='affix-placeholder'></div>").insertAfter(".submenu:last");
    });
</script>

<style>
.affix-placeholder {
  display: none;
}
.affix + .affix-placeholder {
  display: block;
  visibility: hidden;
  height: /* same as your affix element */;
  width: 100%;
  overflow: auto;
}
</style>


Answer 5:

添加页眉包装它上面的栏目周围。 并给包装一个最小高度等于这些元素结合高度。

例:

<div class="header-wrapper" >
   <div class="topbar" >this bar is 36 pixels high</div>
   <div class="menubar">this menubar has a height of 80 pixels</div>
</div>

<div class="" >Your container moving upwards after the affix element becomes fixed</div>

两个元件36 + 80 = 116的高度。 头包装物的最低高度为此应该是116个像素,请参见:

.header-wrapper {
  min-height: 116px;
}

很简单利落的解决方案



文章来源: Twitter Bootstrap Affixed Navbar - div below jumps up