css - 通过滚动切换 bootstrap affix 和 affix-top class 使 navbar 下面的元素向上移动

Question

通过查看 W3schools 的这个例子

How To Create an Affixed Navigation Menu

你会发现这行代码背后的原因

.affix + .container-fluid {
  padding-top: 70px;
 }

像这样:在我们通过滚动在 Bootstrap 中设置一个导航栏元素之后，名为 affix-top 的类将通过切换这两个类更改为 affix 我们将看到navbar 之后的元素会根据 navbar 的高度滚动到顶部，这是因为 navbar 的 position 会变为 absolute 而它下面的元素会向上移动。为了避免这种情况的发生，我们为元素添加了 padding-top，恰好在带有类 affix 的导航栏之后。我的问题是，如果我在导航栏之后没有元素作为兄弟，我应该如何选择恰好在导航栏的父元素之后的下一个元素，类 affix

我的代码是这样的:

<header id="masthead" class="header">
<div class="info-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-left info">
        <span class="phone">

        </span>
        <span class="email">

        </span>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-right auth">
        <span class="add-property-link-container">

        </span>
      </div>
    </div>
  </div>
</div>
<div id="nav-container-realestate">
  <nav class="navbar navbar-default affix-top" data-spy="affix" data-offset-top="40">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu_navbar" aria-expanded="false">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="http://localhost/areal">
                          <img src="http://localhost/areal/wp-content/uploads/2016/05/apadana-logo.png" srcset="" sizes="(max-width: 174px) 85vw, (max-width: 174px) 81vw, (max-width: 174px) 88vw, 174px" width="128" height="50" alt="AmirEstate">
                      </a>
        <span class="navbar-brand-title">
                        Apadana <span class="navbar-brand-title-gray">Real Estate Agency</span>
        </span>
      </div>
      <div class="collapse navbar-collapse" id="main_menu_navbar">
        <ul id="menu-test" class="nav navbar-nav navbar-right">
            <li id="menu-item-11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11">
                <a title="About Us" href="http://localhost/areal/about-us/">About Us</a>
            </li>
            <li id="menu-item-12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-12">
                <a title="Contacts" href="http://localhost/areal/contacts/">Contacts</a>
            </li>
            <li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13">
                <a title="Blog" href="http://localhost/areal/blog/">Blog</a>
            </li>
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-14 active">
                <a title="Home" href="http://localhost/areal/">Home</a>
            </li>
        </ul>
       </div>
    </div>
  </nav>
</div>
</header>
<div id="content">
   content of the page
</div>

当导航栏有类 affix

时，我想为带有 id content 的 div 设置填充

提前致谢

编辑 1:

为了让我的愿望更加明确，我将添加我的未开发页面的屏幕截图

'' 是黄色“div”的容器，顶部带有类“info-wrap”，后面是“navbar”。

如果我滚动，我会看到作为内容属性的背景图像通过将类“affix-top”更改为“affix”而向上移动

编辑 2

伙计们，我想告诉你们，我不是在问我能否使用 CSS 选择器来获取元素的父元素。我的问题是在我的代码中如何解决在使用 bootstrap 词缀的情况下在 'header' 元素之后向上提升元素的问题，并且没有与 'navbar' 同级的元素。实际上，我停止了，但没有能力在 CSS 中获取父元素，我想要任何替代的特定逃避方式来解决这个问题。再次感谢您的帮助。我期待着从你那里得到更多的帮助。

Answer 1

如果你总是将填充放在 #content 中呢？然后将 absolute:position 设置为 .affix-top 并相对于他的 parent 保持在他的位置。

.nav-container-realestate {
  position: relative;
}

.affix-top {
  position: absolute;
  width: 100%;
}

.affix {
  top: 0;
  width: 100%;
}

#content {
  padding-top: 70px;
}

演示: https://jsfiddle.net/blonfu/9z683r2n/2/