I have tried to follow some of the answers here (How can I make a div stick to the top of the screen once it's been scrolled to?), but all of them resize my divs out of the page when scrolled. This one seems to work the best but it has a flicker and kind of wants to return to the top if only a little scroll is present. I am not sure what to do from here so an expert's eye would be appreciated.
<div wire:loading.class="opacity-50" class="fixed-scrollbar rounded-lg @unless($complex || $this->hidePagination) rounded-b-none @endunless shadow-lg bg-white max-w-screen overflow-x-scroll border-4 @if($this->activeFilters) border-blue-500 @else border-transparent @endif @if($complex) rounded-b-none border-b-0 @endif">
<div>
<div class="fixedElement justify-between items-center mb-1">
<div class="h-10 flex items-center">
<div class="w-1/6 relative mx-1">
<h5>
Impressions: {{number_format($total_imp, 2, '.', ',')}}
</h5>
</div>
</div>
<div class="flex flex-wrap items-center space-x-1">
<x-icons.cog wire:loading class="h-9 w-9 animate-spin text-gray-400" />
@if($this->activeFilters)
<button wire:click="clearAllFilters" class="flex items-center space-x-2 px-3 border border-red-400 rounded-md bg-white text-red-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-red-200 focus:outline-none"><span>{{ __('Reset') }}</span>
<x-icons.x-circle class="m-2" />
</button>
@endif
@if($exportable)
<div x-data="{ init() {
window.livewire.on('startDownload', link => window.open(link, '_blank'))
} }" x-init="init">
<button wire:click="export" class="flex items-center space-x-2 px-3 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none"><span>{{ __('Export') }}</span>
<x-icons.excel class="m-2" /></button>
</div>
@endif
@if($hideable === 'select')
@include('datatables::hide-column-multiselect')
@endif
@foreach ($columnGroups as $name => $group)
<button wire:click="toggleGroup('{{ $name }}')"
class="px-3 py-2 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none">
<span class="flex items-center h-5">{{ isset($this->groupLabels[$name]) ? __($this->groupLabels[$name]) : __('Toggle :group', ['group' => $name]) }}</span>
</button>
@endforeach
<button wire:click="$emit('sec60')"
class="px-3 py-2 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none">
<span class="flex items-center h-5">60 sec</span>
</button>
<button wire:click="$emit('sec30')"
class="px-3 py-2 border border-green-400 rounded-md bg-white text-green-500 text-xs leading-4 font-medium uppercase tracking-wider hover:bg-green-200 focus:outline-none">
<span class="flex items-center h-5">30 sec</span>
</button>
</div>
</div>
<div class="table align-middle min-w-full">
@unless($this->hideHeader) -->
<div class="fixedElement1 table-row divide-x divide-gray-200">
@foreach($this->columns as $index => $column)
@if($hideable === 'inline')
@include('datatables::header-inline-hide', ['column' => $column, 'sort' => $sort])
@elseif($column['type'] === 'checkbox')
@unless($column['hidden'])
<div class="table-cell h-6 w-32 py-4 flex justify-center overflow-hidden align-top px-6 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider focus:outline-none">
<div class="px-3 py-1 rounded @if(count($selected)) bg-orange-400 @else bg-gray-200 @endif text-white text-center">
{{ count($selected) }}
</div>
</div>
@endunless
@else
@include('datatables::header-no-hide', ['column' => $column, 'sort' => $sort])
@endif
@endforeach
</div>
<div class="fixedElement2 table-row divide-x divide-blue-200 bg-blue-100">
@foreach($this->columns as $index => $column)
@if($column['hidden'])
@if($hideable === 'inline')
<div class="table-cell w-5 overflow-hidden align-top bg-blue-100"></div>
@endif
@elseif($column['type'] === 'checkbox')
<div class="overflow-hidden align-top bg-blue-100 px-6 py-5 border-b border-gray-200 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider flex h-full flex-col items-center space-y-2 focus:outline-none">
<div>SELECT ALL</div>
<div>
<input type="checkbox" wire:click="toggleSelectAll" @if(count($selected) === $this->results->total()) checked @endif class="form-checkbox mt-1 h-4 w-4 text-blue-600 transition duration-150 ease-in-out" />
</div>
</div>
@elseif($column['type'] === 'label')
<div class="table-cell overflow-hidden align-top">
{{ $column['label'] ?? '' }}
</div>
@else
<div class="table-cell overflow-hidden align-top">
@isset($column['filterable'])
@if( is_iterable($column['filterable']) )
<div wire:key="{{ $index }}">
@include('datatables::filters.select', ['index' => $index, 'name' => $column['label'], 'options' => $column['filterable']])
</div>
@else
<div wire:key="{{ $index }}">
@include('datatables::filters.' . ($column['filterView'] ?? $column['type']), ['index' => $index, 'name' => $column['label']])
</div>
@endif
@endisset
</div>
@endif
@endforeach
</div>
.fixedElement {
position absolute;
display:flex;
align-items:center;
margin-bottom: .25rem!important;
justify-content: space-between;
position:fixed;
align-self: flex-start;
width:100%;
z-index:100;
}
.fixedElement1 {
position absolute;
display: table-row;
box-sizing: border-box;
position:fixed;
align-self: flex-start;
height: auto;
width:100%;
z-index:100;
}
.fixedElement2 {
position absolute;
display: table-row;
box-sizing: border-box;
position:fixed;
align-self: flex-start;
height: auto;
width:100%;
z-index:100;
}
$(window).scroll(function(e){
var $el = $('.fixedElement');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 200 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '5px', 'background-color': '#fff'});
}
if ($(this).scrollTop() < 200 && isPositionFixed){
$el.css({'position': 'static', 'top': '5px'});
}
});
$(window).scroll(function(e){
var $el = $('.fixedElement1');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 240 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '45px', 'background-color': '#fff'});
}
if ($(this).scrollTop() < 240 && isPositionFixed){
$el.css({'position': 'static', 'top': '45px'});
}
});
$(window).scroll(function(e){
var $el = $('.fixedElement2');
var isPositionFixed = ($el.css('position') == 'fixed');
if ($(this).scrollTop() > 300 && !isPositionFixed){
$el.css({'position': 'fixed', 'top': '100px'});
}
if ($(this).scrollTop() < 300 && isPositionFixed){
$el.css({'position': 'static', 'top': '100px'});
}
});
</script>
