The header behavior occurs because the entire base is being rendered, which causes the note itself to scroll rather than the base container.
To fix this you can create a max height on the base, which allows the header to remain fixed at the top.
.bases-embed .bases-view {
max-height: 600px;
}
You can adjust 600px to your taste.
You can also add .bases-view[data-view-name="YourViewName"]to only affect bases with that specific view name, or .bases-view[data-view-type="table"]to leave other view types such as cards and lists unaffected.
The .bases-embed class targets bases within a regular note, rather than .base files. The .base files already have a sticky header by default, so I personally leave those untouched since I like having the full available screen space on those files.
By default, the code above keeps the header transparent, which I personally don’t prefer because it clashes with the data scrolling behind. To change the header to a solid background, you can use the following:
div.bases-thead {
background-color: var(--background-primary);
}
You can also swap in any color you like.
Hope this helps!