Facebook – How to Hide Top Nav Bar When Scrolling Down

facebookuserscripts

In Facebook, when scrolling down, the top blue bar is still in there. Is there a way to hide it when scrolling down, just like how Stack Exchange works? That way, I won't be distracted by the red notification when reading, but still conveniently be able to reach it when in need.

I'm aware of the F.B. Purity plugin, but even when I have unchecked the Freeze Top Nav Bar option, it's still there. I have asked the author, he says that's because of Facebook's default. He doesn't plan to update this function.

I use Firefox.
enter image description here

Best Answer

Normally with something like this you can change the navbar from position: fixed to another position value, but Facebook does their site differently. Instead of scrolling the whole page and keeping the nav fixed, they scroll all of the content. It's actually kind of puzzling how they do so, it must be using JavaScript somewhere.

So you must use a userscript manager like Tampermonkey to do something like the following. It visually hides elements on Facebook (by default all but the timeline) when the page is scrolled. You can change what is being hidden or not on scroll by changing the list hideElementList. If you want only the navbar to disappear, remove the second and third entries (including the comma before them).

// ==UserScript==
// @name         Facebook nav hider
// @namespace    https://zachsaucier.com/
// @version      0.1
// @description  Hides Facebook's navigation bar when the page is scrolled
// @author       Zach Saucier
// @match        https://www.facebook.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var hideElementList = [
        document.getElementById("pagelet_bluebar"),
        document.getElementById("leftCol"),
        document.getElementById("rightCol")
    ];

    function checkScroll(timestamp) {
        console.log(window.pageYOffset);
        if(window.pageYOffset !== 0) {
            for(var i = 0; i < hideElementList.length; i++) {
                hideElementList[i].style.opacity = "0";
            }
        } else {
            for(var i = 0; i < hideElementList.length; i++) {
                hideElementList[i].style.opacity = "1";
            }
        }
        window.requestAnimationFrame(checkScroll);
    }

    window.requestAnimationFrame(checkScroll);
})();

I also uploaded this script to GreasyFork for easy install if you have something like Tampermonkey installed.

Related Topic