[!Warning] Does not work in Safari < v16.

#Filament Sticky Header

A Filament Panel plugin to make page headers sticky when scrolling.

#Compatibility

| Package Version | Filament Version | |-----------------|------------------| | 1.x | 2.x | | 2.x | 3.x | | 3.x | 4.x |

#Upgrading from v2 to v3

If you are upgrading from version 2 to version 3, you will need to update the namespace anywhere you are using the plugin from Awcodes\FilamentStickyHeader to Awcodes\StickyHeader.

#Installation

Install packages via composer

composer require awcodes/filament-sticky-header

[!IMPORTANT] If you have not set up a custom theme and are using Filament Panels follow the instructions in the Filament Docs first.

After setting up a custom theme add the plugin's views to your theme css file or your app's css file if using the standalone packages.

@import '../../../../vendor/awcodes/filament-sticky-header/resources/css/plugin.css';

#Usage

Just add the plugin to your panel provider, and you're good to go.

use Awcodes\StickyHeader\StickyHeaderPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            StickyHeaderPlugin::make(),
        ])
    ])
}

#Floating Theme

To use the 'Floating Theme' use the floating() method when instantiating the plugin.

When using the floating theme you can also use the colored() method to add your primary background color to the header.

use Awcodes\StickyHeader\StickyHeaderPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            StickyHeaderPlugin::make()
                ->floating()
                ->colored()
        ])
    ]);
}

Both the floating() and colored() methods can receive closure that will be evaluated to determine if the theme should be applied. This allows you to apply the theme conditionally, for instance, based off of user preferences.

use Awcodes\StickyHeader\StickyHeaderPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            StickyHeaderPlugin::make()
                ->floating(fn():bool => auth()->user()->use_floating_header)
                ->colored(fn():bool => auth()->user()->use_floating_header)
        ])
    ]);
}

#Disabling on List Pages

To disable the sticky header on list pages, you can use the stickOnListPages() method.

use Awcodes\StickyHeader\StickyHeaderPlugin;
 
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            StickyHeaderPlugin::make()
                ->stickOnListPages(false)
        ])
    ]);
}

#Changelog

Please see CHANGELOG for more information on what has changed recently.

#Contributing

Please see CONTRIBUTING for details.

#Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

#Credits

• Adam Weston
• All Contributors

#License

The MIT License (MIT). Please see License File for more information.