позиция липкая не относится к гибкому ребенку, хотя я использую верх - PullRequest
0 голосов
/ 26 января 2019

Я пытаюсь создать пользовательский интерфейс с HTML.

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

Issues:

  1. после некоторой прокрутки прокручиваемое окно навигации прокручивается вверх и
  2. небесно-голубое поле не останавливается ниже поля навигации.пожалуйста, посмотрите кодовую ручку и помогите мне .... html

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}

.container {
  display: flex;
  position: relative;
  top: 400px;
  border-top: 4px solid black;
}

.box1 {
  /* height:500px; */
  position: sticky;
  top: 50px;
  width: 40%;
  background-color: aqua;
  border: 2px solid grey;
}

.box2 {
  height: 1000px;
  width: 60%;
  background-color: pink;
}

.nav {
  position: sticky;
  top: 0;
  background-color: blue;
  z-index: 1000;
  height: 50px;
}

.image-con {
  position: fixed;
  background-color: brown;
  border: 2px solid yellow;
  height: 500px;
  width: 100%;
  z-index: -1000;
}
<div class="nav"></div>

<div class="image-con"></div>

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

https://codepen.io/mbs-yaswanth/pen/yZOLXQ

1 Ответ

0 голосов
/ 27 января 2019

Удалить

body,html{
        height: 100%;
}

Как только ваша липкая навигация коснется нижней части вашего html и тела, она больше не будет липкой.Кажется, что он переместился обратно на страницу, но на самом деле он просто не следит за вами через переполнение.Надеюсь это поможет. РЕДАКТИРОВАТЬ
Я думаю, это то, что вы ищете, я немного изменил ваш код, так что просто внимательно просмотрите его.по какой-то причине, когда вы запускаете фрагмент кода, поле 2 становится меньше, но оно работает при полном предварительном просмотре страницы.Надеюсь, это поможет

body,
html {
  width: 100%;
  margin: 0;
}

.box1 {
  height:500px; 
  position: sticky;
  top: 50px;
  width: 39%;
  vertical-align: top;
  display: inline-block;
  background-color: aqua;
  border: 2px solid grey;
}

.box2 {
  display: inline-block;
  height: 1000px;
  width: 60%;
  background-color: pink;
}

.nav {
  position: sticky;
  top: 0;
  background-color: blue;
  z-index: 1;
  height: 50px;
}

.image-con {
  background-color: brown;
  border: 2px solid yellow;
  height: 500px;
  width: 100%;
}
<div class="nav"></div>

<div class="image-con"></div>

<div class="box1"></div>

<div class="box2"></div>
...