Question

我在我的投资组合中添加了一个新功能，其中标题贴在顶部，也就是属性在达到某个scrollY值范围时更改为固定，这是有效但不幸的是position:fixed

在滚动之前，将位置设置为初始默认值

向下滚动后，标题会获得一个固定的属性，但是空格会踢到窗口的最右侧。

如何解决此问题？这是html代码：

<div class="fluid-container row header header-f">
    <div class="col-md-4 sitename">
      <h1 class="site_name center">buoyantair</h1>
    </div>
    <div class="col-md-6 sitemenu">
      <div class="menu center">
        <a class="btn" href="#">Home</a>
        <a class="btn" href="#">About</a>
        <a class="btn" href="#">Contact</a>
      </div>
    </div>
  </div>

CSS代码：

header-f {
    max-height: 100px;
    position: fixed;
    display: block;
    min-width: 100%;
    animation: slide-in .5s;
}
.header {
    background: linear-gradient(15deg, #5DCC90 70%, #ADD962);
    color: #214732;
    min-height: 10vh;
    font-family: "Ubuntu";
    z-index: 1000;
}

你可以在这里观看https://buoyantair.github.io/

Answer 1

将left:0; right:0;添加到标题的样式中应确保它始终粘在屏幕的两侧。

Answer 2

我试图遵循引导风格

在容器中放置一行并从标题中删除'row'类..请参阅下面的评论

<div class="fluid-container header"> <!--remove row class -->
<div class="row"> <!-- add row here -->
<div class="col-md-4 sitename">
  <h1 class="site_name center">buoyantair</h1>
</div>
<div class="col-md-6 sitemenu">
  <div class="menu center">
    <a class="btn" href="#">Home</a>
    <a class="btn" href="#">About</a>
    <a class="btn" href="#">Contact</a>
  </div>
</div>

Answer 3

将right: 0添加到您的.header-f

.header-f {
    max-height: 100px;
    position: fixed;
    display: block;
    min-width: 100%;
    animation: slide-in .5s;
    right: 0;
}

Answer 4

通过在容器流体之后添加Row来实现。

因为行包含 margin-right：-15px; margin-left：-15px;

<div class="fluid-container header     ">
      <div class="row">
        <div class="col-md-4 sitename">
          <h1 class="site_name center">buoyantair</h1>
        </div>
        <div class="col-md-6 sitemenu">
          <div class="menu center">
            <a class="btn" href="#">Home</a>
            <a class="btn" href="#">About</a>
            <a class="btn" href="#">Contact</a>
          </div>
        </div>
      </div>
  </div>

希望它有助于

CSS中固定属性的问题

4 个答案: