Difference between revisions of "Fixed Page Headings"

Latest revision as of 07:34, 30 May 2019

Fixed Header / Sticky Header / Fixed Heading / Sticky Navigation

This is a design technique that has become popular to a fault from around 2016 - 2018. Using a fixed heading panel is a way web developers have targeted audiences using mobile devices and hold them in the vertical orientation when visiting a web site. Fixed headers will not scroll down the page and continue along with the user. Rather the background image and contents inside the header appear to stay fixed as the user scrolls. This makes the entire header behave as its own independent “panel” offset by the rest of the layout.

Top #7 on 10 Things a Website Should Never, Ever Do (in web design) by Kyle Schaeffer states the following:

7. Never use fixed position without a fallback

A "fixed" element in the browser window is one that stays on the screen, even as you scroll down the page. It’s a simple CSS technique, but it’s been amazingly popular in recent months. One thing I’ve noticed in all these fixed designs is the failure to provide a fallback for users who are on smaller screens. The truth of the matter is that the web isn’t just for desktops any more. Internet connectivity is coming in all sorts of shapes and sizes: desktops, laptops, mobiles, tablets, e-readers, gaming consoles, and even refrigerators (yes, even refrigerators). The future promises only more diversity in internet-connected devices, and that means you can’t assume users will have a large viewing area on which to see your website.

Although Schaeffer argues that it is the small screen devices a developer using a fixed position header is neglecting, it is ironically the mobile device users that are being targeted. The fixed header isn't an issue on a "tall" screen, like a mobile phone held in the vertical position. Unfortunately, for the wide screen PC user, the fixed header is an ugly obstacle interfering with the site visitor's access to information. Now the visitor has to do more scrolling while trying to peep though a wide but short slit that is the only part of the page that scrolls.

Listed as Common Mistake #1: Large, Fixed Headers on freelance web designer Bojan Janjani's helpful article he opines:

We’re seeing more and more of tall, sticky headers — branding blocks and menus that have a fixed position and take up a significant amount of the viewport. They stay glued to the top and often block the content underneath them. I’ve seen headers on high-production websites that are over 150 pixels in height, but is there real value behind them? I might be pushing it a little bit, but large, fixed headers remind me of the dreaded and now ancient HTML frames. Yikes!

Ironically this is what I think off too, the old "Frames" of HTML past. We were all told not to use frames to create a static header and now the trend is going back to disabling part of the site visitors viewing area once again.

Developer Alisdair McDiarmid offers a "bookmarklet" to address the problem of sticky headers:

(function () { 
  var i, elements = document.querySelectorAll('body *');

  for (i = 0; i < elements.length; i++) {
    if (getComputedStyle(elements[i]).position === 'fixed') {
      elements[i].parentNode.removeChild(elements[i]);
    }
  }
})();

Bookmarklet for Any Browser - Amazing FIX no Addon Required!

You do not need a plugin or addon to remove sticky header from the web page you are viewing. You can create a type of bookmark that doesn't go to an actual URL / web site, but rather modifies the web site you are currently viewing.

Use the following code by pasting it into the URL line of the bookmark:

(A) PASTE THIS INTO BOOKMARK PROPERTIES, LOCATION

javascript:(function () {
var i, elements = document.querySelectorAll('body *');

for (i = 0; i < elements.length; i++) {
if (["sticky", "fixed"].includes(getComputedStyle(elements[i]).position)) {
elements[i].parentNode.removeChild(elements[i]);
}
}
})();

Detailed Instructions for Palemoon Browser or Firefox:

1. From any page press CNTRL-D
2. In the bookmark page dialog for name enter something like "NO STICKY"
3. In the bookmark page dialog for folder use "Bookmarks Menu"
4. click DONE
5. From the bookmarks menu locate the bookmark, right click and choose PROPERTIES to edit the bookmark
6. In the properties dialog change the LOCATION field by deleting what is in the box and pasting the Javascript code from above (A) - it will all fit on one line
7. In the properties dialog click SAVE

You can move the new NO STICKY bookmark to the top of the list above "Recently Bookmarked" so it is easy to select or you can add it to the Bookmarks Toolbar if you use it.

When you visit a web page and a sticky header appears, simply go to your bookmarks menu and select the bookmark NO STICKY. Rather than navigating your browser to another page, it will simply modify the page you are viewing by removing the sticky element!

Resources

• Fix the sticky top navigation bars on websites