Липкий элемент в админте - PullRequest
Новая
       15

Липкий элемент в админте

0 голосов
/ 05 ноября 2018

В настоящее время я работаю с шаблоном adminlte, и я хочу создать элемент с липким поведением, но я не знаю, кажется, что я не могу сделать это, даже помещая в div различных файлов.

Я хочу поместить липкий div под панель навигации (в этом оранжевом div):
i want to place the sticky div under the navbar(in this orange div)

CSS: 

.sticky{
  position: -webkit-sticky;
  position: sticky;
  width: 100%;
}

HTML: 

@section('content')
<div id="page-top" style="margin-top: -15px ">
<div class="sticky" style="background: #66c1bd;height: 3em;top:0px;position: sticky;position: -webkit-sticky;">
        test
      </div>
  <!-- multistep form -->
  <!-- The Modal -->
</div>

Даже я использую встроенный CSS, который все еще не работает,

Предварительный просмотр

Начало:
beginning

после прокрутки немного:
after scroll a bit

Другая информация, я использую laravel. Но не думайте, что это проблема.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Я думаю, что нашел правильный ответ на свой вопрос.

position:sticky не может хорошо работать в adminLTE из-за <div class="wrapper"> (вы можете найти его под тегом body.

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

Итак, заключение

убедитесь, что overflow вашего родительского div установлен на style="overflow:visible visible;", чтобы переопределить стиль, который имеет adminLTE.

Это мой полный синтаксис: 

<body class="hold-transition skin-black-light sidebar-mini">
<!-- Site wrapper --><div class="wrapper" style="overflow:visible visible;">
0 голосов
/ 05 ноября 2018

Маби, если вы сделаете это не липким, а 

.sticky {
   position: fixed;
}
...