Freeze/fix header

Hi, I’d like to have a frozen/fixed header div with some text in my Dash app, much like how in Microsoft Excel spreadsheets you can freeze one or more rows to remain visible as you scroll down. Any ideas if this is possible and how to accomplish it? Many thanks in advance.
Jonathan

It is possible directly using html and css and javascript in your divs style parameter or className parameter and creating your own css class in the assets folder.
Here’s an example on how to use html and css to achieve that https://www.w3schools.com/howto/howto_js_sticky_header.asp
and here how to load javascript into your dash app
https://dash.plot.ly/external-resources

1 Like

Fantastic, thank you for the help @lahashh!

1 Like

Hi @lahashh, thanks again for the advice. I’m having trouble getting the sticky header effect as you demonstrated. Here’s what I’ve done, perhaps you can spot where I’ve gone wrong?

First, a stripped-down version of my app, built referencing the resources you linked:

import dash
import dash_html_components as html

app = dash.Dash(__name__)

server = app.server

app.layout = html.Div([
    html.Div(className='top-container',
             children=[
                 html.H1('Scroll Down'),
                 html.P('Scroll down to see the sticky effect')
             ]),
    html.Div(className='header', id='myHeader',
             children=[html.H1('Sticky App Title', style={'color': 'white'})]
             ),

    html.Div(className='content', id='body',
             children=[
                 html.Div(children=html.H3('Mock-up of a Dash web app')),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
                 html.P(
                     '''Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, 
                     maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, 
                     id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur 
                     his ad. Eum no molestiae voluptatibus.'''),
             ])
])


if __name__ == '__main__':
    app.run_server(debug=True) 

And here are the .css and .js files from the “assets” folder:

header.css:

 /* Style the header */
.header {
  padding: 10px 16px;
  background: #0d4d6d;
  color: #0d4d6d;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 102px;
} 

sticky-script.js:

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the header
var header = document.getElementById("myHeader");

// Get the offset position of the navbar
var sticky = header.offsetTop;

// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

Here’s a screenshot of the app output:

My understanding is that the “Sticky App Title” div should “stick” to the top of the page as a user scrolls down, but this isn’t happening. Any thoughts on what I’ve done wrong? Thanks!

For anyone else trying to figure this out, here’s what I did. I wasn’t able to get the nifty sticky header to work as @lahashh suggested, so I went the simpler route and created a custom CSS stylesheet in the assets folder with a “top-bar” class, like this:

 /* Style the header */
.top-bar {
  background: #0d4d6d;
  position: fixed;
  top: 0;
  width: 100%;
  overflow: hidden;
}

Then when I call the “top-bar” class name, the “position: fixed” line from the stylesheet ensures that the header is fixed in place when the user scrolls, and the “top: 0” line puts the header bar at the top of the page.

Has anyone else figure out how to make the sticky example work?