How to disable sticky search bar in Google search portal?

Question

Google recently introduced a sticky search bar that, as the name suggests, sticks to the page on top of it when the user scrolls. Here's how it looks on scrolling down:

I find sticky top bars incredibly annoying because they are often of no use to me, and they encroach upon precious screen real estate. Stack Exchange websites thankfully offer a preference to disable the sticky top bar, but I couldn't find such setting in Google Search settings or in Google account settings.

When looking for solutions, I came across the answers to the question Un-stick sticky search bar (like on YouTube or Facebook), and all of them failed to help me out.

I had already tried the uBlock Origin. I ended up disabling the Google search bar completely from the whole page, which was also annoying because I do use Google search bar.

I also tried the bookmarklet approach (javascript execution) as suggested here but it achieved the same effect as uBlock Origin.

I also know I can disable javascript which solves this problem, but the Google search page looks ugly in that case, and it also reduces some functionality along the way.

So, how do I remove the sticky search bar, but not the search bar from the top of the page?

Answer 1

You can use either of the following two userscripts to make Google search bar unsticky. Userscripts were tested on Firefox v86 with Greasemonkey addon.

Note: if you don't know about userscripts, you can get started with them here.

---

Following userscript keeps the search bar fixed at the absolute top. This means that if you want to type in the Google search bar (this is not browser's URL/search bar) you would have to scroll to the top. The search bar would otherwise remain invisible when scrolling up and down. This userscript makes the search bar least intrusive.

// ==UserScript==
// @name         Unsticky Google search bar
// @namespace    http://127.0.0.1
// @version      0.1
// @description  Makes the Google search bar unsticky
// @icon         https://www.google.com/favicon.ico
// @author       NanoBot
// @include        https://www.google.*/search?*
// @grant        unsafeWindow
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const target = document.getElementById('searchform')
    const config = {attributeFilter: ["style"]}
    const callback = function(mutationList, observer) {
        for(const mutation of mutationList) {
            if (mutationList[0].target.style.position === 'fixed') {
                target.style.position = 'absolute'
                target.style.top = '0px'
            }
        }
    }

    const observer = new MutationObserver(callback)
    observer.observe(target,config)

})();

---

This userscript is for those who wants to see the search bar when scrolling up but wants it be hidden when scrolling down.

// ==UserScript==
// @name         Unsticky Google search bar
// @namespace    http://127.0.0.1
// @version      0.1
// @description  Makes the Google search bar unsticky
// @icon         https://www.google.com/favicon.ico
// @author       NanoBot
// @include        https://www.google.*/search?*
// @grant        unsafeWindow
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    const searchBar = document.getElementById('searchform')
    var lastPosition = window.scrollY
    document.addEventListener('scroll', event => {
      var newPosition = window.scrollY

      if (newPosition > lastPosition && searchBar.style.position === 'fixed') {
         searchBar.style.position = 'absolute'
      }
  
      if (newPosition < lastPosition && searchBar.style.position === 'absolute') {
        searchBar.style.position = 'fixed'
      }
  
      lastPosition = window.scrollY
  
    })

})();