That is because the content of the body can be one of the two :
When the preview is open …
<div class="tc-tiddler-preview">
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
<div class="tc-tiddler-preview-preview">
<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
</$transclude>
</div>
</div>
or when the preview is closed …
<$reveal stateTitle=<<edit-preview-state>> type="nomatch" text="yes">
<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
</$reveal>
As described in the tiddler $:/core/ui/EditTemplate/body/default.
The position sticky doesnt work because when the preview is open, the nearest parent element of the editor bar becomes .tc-tiddler-preview, and the overflow of that class is set to auto. This prevent the stricky position from working :
Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow
is hidden
, scroll
, auto
, or overlay
), even if that ancestor isn’t the nearest actually scrolling ancestor. This effectively inhibits any “sticky” behavior (see the GitHub issue on W3C CSSWG).
source : position - CSS: Cascading Style Sheets | MDN
EDIT: Oops, I just repeated what john said, my bad !
You might want to use overflow:visible though, since this is the default value.
Another option is to add a fixed height : Dealing with overflow and position: sticky; | CSS-Tricks - CSS-Tricks