Search code examples
htmlcsslaraveladminlte

Sticky element in adminlte

Currently I'm working with adminlte template, and I want to make an element with sticky behavior, but I don't know it seems I can't do it even placing in diverent div's.

I want to place the sticky div under the navbar(in this orange 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>

Even I use inline CSS still not working,

The preview

beginning:
beginning

after scroll a bit:
after scroll a bit

Another info, I'm using laravel. But don't think it is the problem.

Solution

  • I think I've found the right answer to my question.

    The position:sticky can't work well in adminLTE because of the <div class="wrapper"> (you can found it under body tag.

    I inspired from this article., It mention that the sticky won't work if we put it under parent that has overflow:hidden so the browser can't calculate the correct value (height) to determine when it to be sticky

    So the conclusion

    make sure the overflow of your parent div set to be style="overflow:visible visible;" to overide the style that adminLTE has.

    This is the full syntax of mine:

    <body class="hold-transition skin-black-light sidebar-mini">
<!-- Site wrapper --><div class="wrapper" style="overflow:visible visible;">