激活时附加隐藏顶部

Question

我有一个导航栏并想应用词缀，但只应用到该导航栏的一半。整个东西是 1 个实心方块。我想当词缀处于活动状态时，我可以尝试将 top 属性设置为负数并摆脱导航栏的上半部分。我只是不知道该怎么做。欢迎任何建议。

所以这是我尝试过的：

<nav id="header-nav" data-spy="affix" data-offset-top="50">
     <div class="row1"></div>
     <div class="row2"></div>
</nav>

这个CSS是：

.row1{
padding-top: 10px;
}

.row2 {
    padding-bottom: 20px;
}

.affix {
    top: -10px;
    width: 100%;
}

#header-nav.affix {
    position: absolute;
    top: -50px;
}

但显然 top 似乎根本没有改变任何东西。

Answer 1

实际上只需将 margin-top: -50px; 放入 .affix class 中即可。问题是 G.Chrome 有时决定使用旧的 CSS 而不是新的。我只是运行从 inspect element->network 中检查了“Disable cache”。

CSS只需要这个：

.affix {
    margin-top: -50px;
    width: 100%;
}

激活时附加隐藏顶部

Affix hide top when active

css

sticky

twitter-bootstrap-3