система сетки начальной загрузки и фиксированная боковая панель - PullRequest
Новая
       21

система сетки начальной загрузки и фиксированная боковая панель

0 голосов
/ 08 мая 2018

Я пытаюсь создать страницу сетки начальной загрузки с двумя основными разделами. один - контент приложения, а другой - боковая навигационная панель. панель навигации намного короче самого содержимого приложения. то, что я пытаюсь сделать, это то, что всякий раз, когда я прокручиваю страницу, навигационная бита на стороне приложения всегда будет придерживаться верхней части страницы (вверху, а не внизу)

мой код: 

<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>

всякий раз, когда я прокручиваю страницу, я всегда хочу видеть в верхнем правом углу панель навигации приложения.

спасибо!

Ответы [ 4 ]

0 голосов
/ 08 мая 2018

вот что для меня решило проблему: 

<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;
}
0 голосов
/ 08 мая 2018

Вы можете попробовать использовать 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;
}

Дайте мне знать для более подробной информации

0 голосов
/ 08 мая 2018

Добавьте это свойство к контейнеру вашего приложения 

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

Дайте position:fixed вашему row. Также добавлен заголовок к моему образцу. 

.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 {}
<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>
0 голосов
/ 08 мая 2018

Попробуйте использовать 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;
}
...