Published at
Updated at
Reading time

The VS Code 1.70 release notes share a new nifty experimental editor feature – sticky scroll!

Find and enable "Sticky Scroll" in your VS Code settings.

VS Code settings showing the Sticky Scroll option.

Or add the following line to your settings.json:

  "editor.stickyScroll.enabled": true

And now, see your JavaScript function signatures stick on the top.

Scrolling in VS Code showing that function signatures stick at the top.

You might argue now that for JavaScript it's an unnecessary editor feature because if you write clean code with short functions, you won't need it. But a) I'm always happy about pretty editor UI features and b) it works for other file formats such as json, css or yaml, too.

VS Code showing a nested JSON files in which the surrounded property lines are sticky.

After sharing this feature on Twitter, Elio Struyf pointed out that you can also configure the sticky element's background color. 🎉

  "workbench.colorCustomizations": {
    "editorStickyScroll.background": "#D44",
    "editorStickyScrollHover.background": "#A00"

It might need a little tweaking to make it work with your color theme, though. 🙈

VS Code with colored sticky function signatures.

Also, if you want to limit the number of sticky lines use editor.stickyScroll.maxLineCount. The setting's 5 by default.

Was this post helpful?
Yes? Cool! You might want to check out Web Weekly for more web development articles. The last edition went out 8 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles