I was asked by a visitor how he could keep a footer locked to the bottom of the screen on a web page, always on top everything else there, in such a way that it stuck to that spot even when the page was scrolled. This article addresses this. The answer is general enough so that it can be used for a header, footer, and in fact, any block of text or image or combination of both.
This article assumes that you have some knowledge of both HTML and CSS, since it delves directly into the code needed. You don't have to be an expert, but you will still need to know a bit, otherwise you won't be able to apply the techniques here to your website.
In a nutshell, the CSS rule to create a persistent element is "position: fixed".
Any selector that has that rule will be taken out of the document flow and stay at the location
you assign, even when the page is scrolled.
Take the following code as an example.
The above, when applied to a DIV block, sticks it to the bottom left of the browser's viewport.
If you want the block to be located at the top left, you will need to use "top: 0 ;" instead of
"bottom: 0;".
A side-effect of using fixed positioning is that the block will either overlap the other elements on the
page or be covered by them. That's where the z-index property comes in. To ensure that the
footer block always overlaps the other elements instead of being covered by them, I assigned it a z-index
of 1. This property determines the stacking order of the blocks.
The bigger the number, the higher in the stack the block appears, overlapping the other elements below it. If you already
have other elements on your page that you have given a z-index of 1, and you want this block to stay on top
of them, give it a bigger number, say 2 or more. Note that the z-index must be an integer (ie, a whole number).
You can see a demo of this code in effect on any page on thesitewizard.com that has Google advertisements
(such as this very page you are reading). As mentioned elsewhere,
I display a "This site uses cookies" notice at the bottom of such pages to notify you about Google's use of cookies on my
pages. The notice uses the exact CSS code described above to position itself at the bottom of the screen and keep it there.
Try scrolling the page, to see the effect of position: fixed on the message bar.
If you don't see any notice at the bottom of the screen, it is either because you have previously dismissed it (by clicking the "Close" button) or you have something that blocks JavaScript execution on this page. For those who have closed it manually, you can easily resurrect it by clearing the cookies in your browser and reloading the page. You don't actually have to clear all your cookies if you don't want to, just delete the one set by thesitewizard.com (ie, the cookie with the name "user_wants_notice_gone"). Another possibility for the missing notice is if you have disabled JavaScript (either in your browser settings or through a plugin). In such a case, please note that it's not enough to re-enable JavaScript (or disable the plugin) to see the notice; you will probably have to reload the page as well (unless your browser or plugin does it automatically).
Although the above demo code was used only for a block of text, you can apply it to any element. For
example, the same rules can be used for images that need to be visible at all times.
In addition, you can place the element at any location in the browser's viewport. That is, you're not
stuck with the top left and bottom left of the screen. Use whatever coordinate you want for the left,
right, top and bottom properties.
Although this is standard CSS and probably used on a lot of sites, including thesitewizard.com, try not to assign fixed positioning to too large a block. Persistent blocks tend to irritate visitors, because they can't scroll away from it. (It's like the HTML frames that some sites in the 1990s used. They irked everyone other than the webmaster who designed the page.) It blocks content, effectively reducing the screen size, and making the viewport smaller than visitors are accustomed to. As such, it's probably best to keep the block as small and as unobtrusive as possible.
If you don't believe me, answer this. Did you click the "Close" button on my cookie notice, to get rid of it? Think about it. That notice, if I may say so myself, is the very definition of brevity, with 3 (sort-of) sentences expressed in only 6 short words, tucked away at the bottom and occupying just one line even in a very narrow browser window. It's as compact and unobtrusive as I can make it, without sacrificing any meaning. Yet you found it irritating enough to want to close it. That is exactly how many people (consciously or otherwise) feel about these "sticky" elements.
Bear that in mind, when creating your own.
Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
