Сохраняйте элементы панели навигации stati c вне зависимости от того, имеется ли на странице полоса прокрутки или нет - PullRequest
Новая
       0

Сохраняйте элементы панели навигации stati c вне зависимости от того, имеется ли на странице полоса прокрутки или нет

0 голосов
/ 23 марта 2020

У меня есть панель навигации в верхней части моего сайта. Проблема в том, что навигационная панель мигает, когда на одной из страниц есть полоса прокрутки. На что очень неудобно смотреть при маршрутизации с одной страницы на другую. Как изменить код таким образом, чтобы панель навигации всегда отображалась c независимо от того, имеется ли на странице полоса прокрутки.

Один из способов сделать это - скрыть полосу прокрутки в теге body и написать пользовательский * 1004. * для каждого компонента. Но это не идеальное решение.

Вот мой css для панели навигации. 

.navigation-bar {
    position: sticky;
    top: 0;
    height: 4.5vw;
    background: white;
    z-index: 121;
}

.nav {
    height: 100%;
    padding-bottom: 0;

}

.nav-item {
    padding: 0 1.75vw;
    margin: 0 0.5vw;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-grow: 1;
}

.nav-item a {
    margin: auto 0;
    display: inline-block;
    text-decoration: none;
    font-size: 1rem;
    vertical-align: middle;
    color: #515F66;
}


.nav-pad {
    align-self: center;
}

.active-nav {
    border-bottom: 2px solid #25C27A;
}


.active-nav a{
    color: #25C27A;
}

.nav-item:hover a{
    color: #25C27A;
}

А вот html

<div class='navigation-bar box-shadow'>
    <div class='col-sm-1 text-center nav-pad'>
        <div src={api_icon} className='img-fluid' alt="icon" />
    </div>

    <div class='col-sm-3 title-text nav-pad' />
        Title
    </div>

    <div class='nav-bar'>
        <div class='nav-item active-nav' href='/'>
            Home
        </div>
        <div class='nav-item' href='/payment'>
             Usage History 
        </div>
        <div class='nav-item' href='/pricing'>
          Pricing
        </div>
    </div>

    <div class='col-sm-3 py-auto nav-pad'>
        username
    </div> 

</div>

1 Ответ

1 голос
/ 23 марта 2020

Вы можете отключить прокрутку тела и добавить прокрутку в div под панелью навигации. Например, предположим, что DOM, который генерирует ваше реагирующее приложение, имеет форму: 

<body>
    <nav>one two three</nav> // let the height be fixed (60px say)
    <div class="scroll">
      content apart from the navbar
    </div>
</body>

Давайте уберем свиток Бэди и добавим прокрутку к .scroll div. 

body {
  overflow: hidden;
}

.scroll {
  height: calc(100vh - 60px); // as the height of navbar is 60px
  overflow: auto;
}

См. полный фрагмент кода ниже. 

body {
  overflow: hidden;
  padding: 0;
  margin: 0;
}

nav {
  height: 60px;
  background: skyblue;
}

.scroll {
  height: calc(100vh - 60px);
  overflow: auto;
}
<html>
  <body>
    <nav>this is the fixed navbar</nav>
    <div class="scroll">
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p>
      <p>
        scroll element
      </p><p>
        scroll element
      </p>
      <p>
        scroll element
      </p><p>
        scroll element
      </p><p>
        scroll element
      </p><p>
        scroll element
      </p>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...