<!--
  canonical-url: https://www.avonture.be/blog/vscode-sticky-scroll
  published:     2023-11-27
  This is a static plain-Markdown mirror generated at build time.
  Visit the canonical URL above for the fully rendered page, with images and interactive components.
-->

# Sticky scroll in vscode

> Enable VS Code's powerful Sticky Scroll feature! Keep contextual lines (like class, function, or section headings) pinned to the top of your editor for effortless code and document navigation.

---
![Sticky scroll in vscode](/img/v2/vscode_tips.webp)

**TL;DR**

This article shows VSCode's Sticky Scroll feature, which pins contextual lines (class name, function name, current heading level in Markdown, etc.) to the top of the editor as you scroll, so you always know where you are in the file. It's enabled by adding `"editor.stickyScroll.enabled": true` to `settings.json`.

> <https://dev.to/amrsamy/vs-code-sticky-scroll-2jcd>

VS Code has recently added a really useful new feature: sticky scroll.

This function allows you to scroll through a document such as a [Markdown file](/blog/vscode-markdown-code-folding), source code written in PHP or JavaScript, or any other supported language and, as you scroll, pin contextual information such as the name of the class, the name of the function, the start of the loop, etc. in the upper part of the editor.

*It pairs nicely with code folding: [Working with regions in VSCode](/blog/vscode-regions) lets you collapse whole blocks, sticky scroll keeps you oriented in the ones you left open.*

This is really very practical. See the illustration below (*image coming from <https://dev.to/amrsamy/vs-code-sticky-scroll-2jcd>*)

![Sticky scroll in vscode](./images/sticky_scroll.gif)

Below is an example taken from this blog:

![Sticky scroll in markdown](./images/sticky_scroll_markdown.webp)

As you can see, I have opened a markdown file and I am showing part of the article around line 878. Pay attention to the first 'stuck' lines in the window: VS Code is showing me my heading 1, my heading 2 and my heading 3 so I know the context. The displayed lines are located in the chapter `Make it easy`. That's pretty cool!

To enable the feature, edit your `settings.json` file and add this entry:

**settings.json**

```json
"editor.stickyScroll.enabled": true
```

Sticky scroll helps you know *where* you are in a long file. The other half of the problem is hiding what you don't need right now, and that's what [Working with regions in VSCode](/blog/vscode-regions) is about.
