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.