Hide webpage headers that remain "stuck" at the top when scrolling

Question

For a long time, headers that remain "stuck" at the top of the page have bothered me. Here is the latest example I have run into:

Website before scrolling:

Website after scrolling down a bit:

(site here)

Notice how the header blocks some of the text, effectively shrinking the horizontal size of my browser.

I'm using firefox, and I've learned that I can hide these troublesome headers by using inspect element and adding inline CSS for the element such as display: none. While this is better than nothing and works when I really want to read an article, it's very irritating to have to do this every time that I visit a website. I'm also aware that I can use a User Style Sheet to create a permanent rule to hide an element for a specific website, but this is also something I'd like to avoid as it's rather time consuming.

So in short my question is this: is there a way to either automate the hiding of an element with a script or a way to write a User Style Sheet to consistently hide these kinds of headers?

Answer 1

Fixed (unscrolling) headers are getting less popular as of January 2016, but if anyone still wanted to manipulate the fixed elements programmatically, they are easy to retrieve in plain JavaScript:

// get Array of all body elements that contain css rule position: fixed
var fixed_elements = Array.prototype.filter.call(
  document.querySelectorAll('body *'),
  function (e) {
    return window.getComputedStyle(e).getPropertyValue('position') === 'fixed'
  }
)

e.g. I published my Scroll Away UserScript on GitHub that changes the style to position:absolute (keeps the elements visible but they will scroll with rest of the page):

• if you already have GreaseMonkey for Firefox or TaperMonkey for Chrome, you can use the github raw link to install it
  _{P.S.: don't forget to edit included / excluded pages as needed...}

Answer 2

The simplest way to remove those annoying fixed headers and footers is to use a bookmarklet (see wikipedia if you not familiar with them).

Create a regular bookmark (e.g. by dragging the icon to the left of the URL to the bookmarks toolbar), and then edit it to add the following code as the bookmark URL:

javascript:(function(){var elems=document.body.getElementsByTagName("*");var len=elems.length;for(var i=0;i<len;i++){var pos=window.getComputedStyle(elems[i],null).getPropertyValue('position');if(pos=='fixed'||pos=='sticky'){var el=elems[i];el.parentNode.removeChild(el);}}})()

Now clicking this special bookmark will remove all the non-scrolling elements on a page. On desktop Chrome you can show/hide the bookmarks toolbar with Ctr+Shift+b (Linux/Windows) or Command+Shift+b (Mac).

The advantage of bookmarklets is that you don't need to install any extra plugins or extensions.

Moreover, bookmarklets also work in most mobile browsers, which means you can use them to increase the reading area on your mobile/tablet. On IOS bookmarklets work in Safari and Chrome (Firefox on IOS doesn't currently allow editing bookmarks).

On Android bookmarklets are supported in Chrome, Firefox, Opera and most modern stock browsers. The fastest way to run a bookmark is by typing its name in the address bar and then tapping (on killFixed in the screenshot) when it appears in the dropdown suggestion menu. Apparently, this is the only way to run a bookmarklet in Firefox and Chrome for Android. For Safari on iOS you need to tap the bookmarks icon and then when the bookmark list is shown in a popup tap your bookmarklet.

Note that sometimes you may need to click the bookmarklet repeatedly and order for all elements to be removed.

Answer 3

You could use a plugin like Greasemonkey. Then just add a bit of custom javascript to edit the css for just that element on that site. It should be there again next time you visit the site.

Answer 4

This is an improved version of ccpizza's code. It fixes a bug where only one top level element is removed instead of all of them.

javascript:(function(){var%20found=true;while(found){var%20elems=document.body.getElementsByTagName("*");var%20len=elems.length;for(var%20i=0;i<len;i++){found=false;if(window.getComputedStyle(elems[i],null).getPropertyValue('position')=='fixed'){var%20el=elems[i];el.parentNode.removeChild(el);found=true;break;}}}})()

Answer 5

I use Element Hiding Helper for Adblock Plus to get rid of the kinds of elements you describe (which I think are called "style: fixed" elements). Specifically, when I want to get rid of one, I click on the Adblock Plus icon in my toolbar, select "Hide an element" (or something like that -- no Firefox on this machine right now) then I have to use the combination of the mouse and some keys (i.e., "w" for "widen selection", "n" for "narrow selection", "s" for "yeah, that's the element I want to get rid of") to select an element, then interact with a dialog box. But once I have done that, the element is absent every subsequent time I use Firefox to visit that particular web site. I have done this for dozens of sites, and it reliably hides the elements I have told it to hide.

https://addons.mozilla.org/en-US/firefox/addon/elemhidehelper/

(I'd prefer an add-on that hides all "style: fixed" elements by default and gives me a way to indicate that I want a particular "style: fixed" element on a particular site to be shown rather than hidden, but I do not know of any.)

Answer 6

After months of dealing with this problem through either Firefox's "inspect element" or really painful editing of my Firefox userChrome/userContent files, I've found that Stylish is easily the best solution for this problem. It's still not automated, but it's far faster than anything else I've found and it persists across visits to websites.

Here's an example:

• I just visited a link from Hacker News about salaries of fictional tv characters. It looks interesting but it has a fixed header. Oh no!
• I check out the header with Firefox's element inspector and determine that the problematic class here is navbar_fixed_top, which is used to make the header div fixed.
• I create a very basic Stylish style that fixes my issue. The issue is now fixed for all future visits to that domain.

Stylish style:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("salaryfairy.com") {
  .navbar-fixed-top { 
      position: absolute;
  }
}

And now the header stays out of my way!

Once I have more data about the typical class names/div ids for fixed headers, I'll look into making a domain-independent stylish style that makes these classes/ids absolute by default.

Answer 7

Lizard plugin does this brilliantly on Firefox (desktop).

https://addons.mozilla.org/en-US/firefox/addon/lizardextension/?src=search

Right click on the offending bit to start a Lizard session. Then you can use key commands to blast away the bits you don't want. I'm working on house projects and finding inspiration images on BHG.com. Their pages have an annoying header that takes up 25% of the page height.