css - 激活时附加隐藏顶部

Question

我有一个导航栏，想应用词缀，​​但只应用到导航栏的一半。整个东西是 1 个实心方 block 。我想当词缀处于事件状态时，我可以尝试将 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 类中。问题是 G.Chrome 有时决定使用旧 CSS 而不是新 CSS。我只是从 inspect element->network 运行它并选中“Disable cache”。

CSS 中只需要这个:

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