Question

我正在尝试使用两个主要部分创建引导网格页面。一个是应用程序内容，另一个是侧面导航栏。导航栏比应用程序内容本身短得多。我想要实现的是，无论何时我滚动页面，应用程序侧导航棒将始终坚持页面顶部（顶部，而不是底部）

我的代码：

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>

    <div class="col-sm-4 col-md-4">
      <app-side-navbar></app-side-navbar>
    </div>

  </div>
</div>

每当我滚动页面时，我都希望始终在应用程序导航栏的右上角看到。

谢谢！

Answer 1

尝试使用fixed

 <div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>
    <div class="nav-sticky">
      <div class="col-sm-4 col-md-4">
        <app-side-navbar></app-side-navbar>
      </div>
   </div>
</div>

在css：

.nav-sticky{
  position: fixed;
  top: 0;
  height: 100%;
  overflow:hidden;
}

Answer 2

您可以尝试仅使用overflow: auto内容包装器

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8 content">
      <div class='col-md-12 wrapper'>
        Content
      </div>
    </div>

    <div class="col-sm-4 col-md-4">
      Sidebar
    </div>
  </div>
</div>

.content {
  max-height: 100vh;
  overflow: auto;
}
.wrapper {
  height: 800px;
}

让我知道更多详情

Answer 3

将此属性添加到您的应用容器

min-height:100vh;
max-height:100vh;
overflow:scroll;

将position:fixed提供给row。我的样本也添加了标题。

＆＃13;

.app {
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
  background: red;
  color: white;
}

.row {
  position: fixed;
  width: 100%;
}

.header {
  height: 50px;
  background: blue;
  color: white;
}

.navigator {}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 header">HEADER</div>
    <div class="col-sm-10">

      <div class="col-sm-8 app">
        APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
      </div>

      <div class="col-sm-4 navigator">
        NAVBAR
      </div>

    </div>
  </div>
</div>

＆＃13;

Answer 4

这就是为我解决问题的原因：

<div class="row">

  <div class="app-wrapper">
    <div class="col-sm-10 col-md-10">
      <div class="col-sm-8 col-md-8">
        <app-content></app-content>
      </div>

      <div class="sticky">
        <div class="col-sm-4 col-md-4">
          <app-side-navbar></app-side-navbar>
        </div>
      </div>
    </div>

  </div>
</div>

和css：

.sticky {
  position: sticky;
  top:0;
  z-index: 999;
}

自举网格系统和固定侧边栏

4 个答案: