How to stick on the top of Grafana variables Dashboard (sticky on top)

Grafana provides variables that enable flexible filtering in dashboards. However, by default, variables are not fixed to the top of the Dashboard. However, depending on your needs, it may need to be pinned to the top of the dashboard. To be able to use filtering without constantly scrolling up and down, here are some ways to work around this:

Resolution

• To solve the problem, there is a way to write additional js code.
  • Solve the problem at the browser level: You can add js code using the extension Tampermonkey.
  • Problem solved in Grafana: You can add js code using Grafana's Dynamic Text Panel.
• I added js code using Dynamic Text Panel.
• Just add the code below to the Dynamic Text Panel.
• Refer to the issue https://github.com/grafana/grafana/issues/11166.
  • In the original source code, section[aria-label="Dashboard submenu"] was used, but there was a problem with padding being applied to unwanted panels, so main > div:nth-child(2) > div:nth -child(3) was used.

// ==UserScript==
// @name         Grafana Sticky Variable Bar
// @namespace     <insert here url>
// @version      0.6
// @description  Makes the variable bar sticky in view and edit screens
// @author       gem85247
// @match        <insert here url>/*
// @require      https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant        GM_addStyle
// @run-at       document-idle
// ==/UserScript==

function GM_addStyle(css) {
  const style = document.getElementById("GM_addStyleBy8626") || (function () {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.id = "GM_addStyleBy8626";
    document.head.appendChild(style);
    return style;
  })();
  const sheet = style.sheet;
  sheet.insertRule(css, (sheet.rules || sheet.cssRules || []).length);
}

GM_addStyle(`
  section[aria-label="Dashboard submenu"] {
    position: fixed;
    top: 81px;
    left: 0;
    z-index: 100;
    width: 100%;
    display: flex;
    padding: 8px 8px 0px 16px;
    -webkit-box-align: center;
    align-items: center;
    box-shadow: rgb(0, 0, 0) 0px 0.6px 1.5px, rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.23) 0px 5px 10px;
    background: rgb(24, 27, 31);
  }
`);

GM_addStyle(`
  main > div:nth-child(2) > div:nth-child(3){
    margin-top: 40px;
  }
`);