Menu Fixed on Top of Page
Recently, I had to quickly develop an online ebook reader. Nothing fancy. There was insufficient time for building a traditional cloud reader.
To get it done quickly, chapter navigation and a burger menu were placed at the top of the page. The CSS declaration position:fixed; was used for that.
Declaration position:fixed; is the focus of this article.
I'll talk about the various decisions that were made when developing the online ebook reader, and why. The reader is for Amish Recipes: Step‑by‑Step: How to Make Truffle Candy.
The fixed menu at the top of the ebook reader will be referred to in this article from time to time.
Let's talk about the position:fixed; declaration.
The declaration fixes a div to a specific position relative to the browser window. You specify a distance from the top, left, right, and/or bottom for the div to be fixed at.
Notice that the position is relative to the browser window, not relative to the document or an element within the document. In other words, no matter what part of the document is displayed in the window, the fixed div stays where it's at.
That was the first consideration.
The ebook reader web page must be usable with both computers and mobile devices. The widths would vary.
The menu needed to be centered above the ebook page being read. Positioning had only left, right, top, and bottom. There are no "center" or "middle" positioning values.
The div had to be made the width of the browser window and the menu centered in that.
The width:100%; declaration was used. But when the div has a border, the width cause the right border to disappear. (I later removed the border from around the top navigation area, but left the solution. A border may be placed around it in the future.)
The solution was to use CSS calc(). This resulted in the width:calc(100% - 2px); declaration.
That worked.
By the way, I needed to specify a z-index value higher than anything else on the page — so the menu would always be on top of anything else that scrolled up into the area it occupied. I used the z-index:999; declaration.
The next thing to consider was the background.
Without a background-color property, the div is transparent.
I decided on a white background because the rest of the page background is white. But I wanted a small amount of transparency so the user would see something there and instinctively know there is content available by scrolling. After some pondering and testing, background-color:rgb(255,255,255,.9); was specified.
For completion, here is the CSS for the ebook reader's top navigation area at the time of this writing.
.top-fixed {
text-align:center;
background-color:rgb(255,255,255,.9);
position:fixed;
top:0;
height:2.5em;
width:calc(100% - 2px);
z-index:999;
margin-right:5em;
padding-top:.25em;
padding-bottom:.25em;
}
The CSS properties position, top, width, background-color, and z-index were addressed in this article. The rest are visual design elements.
A menu fixed at the top of the browser window can be necessary for some implementations.
Before position:fixed; became part of the CSS standard, JavaScript was used to keep the div at a certain spot in the window. CSS is easier and more elegant.
(This article first appeared with an issue of the Possibilities newsletter.)
Will Bontrager
