Css 通过滚动切换引导粘贴和粘贴顶级，使导航栏下方的元素向上移动

通过查看此W3学校示例

您将找到这行代码背后的原因

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

如下所示：在引导中通过滚动名为

粘贴顶部

的类设置navbar元素后，通过切换这两个类，我们将看到navbar之后的元素将根据navbar的高度滚动到顶部，这是因为navbar的

位置

将更改为

absolute

和下面的元素将向上移动。为了避免这种情况发生，我们使用class

affix

为元素添加了

padding top

，正好位于导航栏之后。 我的问题是，如果我在navbar后面没有作为兄弟元素的元素，我应该如何选择navbar的父元素后面的下一个元素，并使用class

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>

阿帕达纳房地产代理公司










页面内容

当导航栏具有class

affix

时，我想为id为

content

的div设置填充

提前谢谢

编辑1:

为了让我的愿望更加清晰，我将在我未开发的页面上添加一个截图

“”是黄色“div”的容器，顶部为类“info wrap”，后面为“navbar”

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

编辑2

伙计们，我想告诉你们，我不是在问我是否可以使用CSS选择器来获取and元素的父元素。我的问题是在我的代码中，如何解决在使用bootstrap词缀并且没有与“navbar”同级的元素的情况下，在“header”元素之后向上移动元素的问题。事实上，我停止了，但没有能力在CSS中获取父元素，我想用任何其他特定的方法来解决这个问题。 再次感谢你的帮助。

---

我期待着从您那里获得更多帮助。

这在css中是不可能的，因为您需要从

粘贴
到
父级
两次，然后才能转到
同级
。css只允许向下级联

你最好把这个班提高一两级

例如，在
body

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

.affix .content {
  padding-top: 70px;
 }

如果你总是在
#内容中添加填充内容
？然后您将
绝对：位置设置为
。粘贴顶部
和相对于其父对象的位置，以保持在其位置

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

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

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

#content {
  padding-top: 70px;
}

演示：
你试过
#content.affix{…}
吗？对于设置直接子元素，我认为您可以使用
选择器，如下所示：
.affix>.childElements{…}
您需要将这些类应用于
标题
元素，以便您可以使用选择器
标题.affix+#内容
以
为目标。CSS没有提供一种从特定元素（例如：
.navbar
）开始并从那里返回到其父元素的方法来查找DOM中的下一个元素。你需要javascript。你能为此创建一个提琴吗？我添加了额外的信息和我的页面截图，让你明白为什么我不能将词缀类添加到“header”元素。听起来你好像在要求解决一个没有解决方案的问题。谢谢你的快速帮助。然而，基于我的编辑1及其额外信息和屏幕截图，不幸的是，我无法将类词缀添加到“header”元素，因为我希望通过滚动页面隐藏黄色部分，“导航栏”将保留在顶部。