Servage Magazine

I think we most of tech-savvy people have used Excel sheet or alike software to prepare huge tables to numbers of rows and columns. Generally, we give top row a heading role that shows what elements are listed in rest of the rows below. Same the way we do for the first column.

Once all done, we go to view > Freeze Panes > Freeze Top Row or Freeze First Column.

This simple yet popular workflow for database users or accounting professionals. Yes, but why we do that. Oh, merely get convenience in scrolling so we can read the top heading titles and select the corresponding cell down to any length of the excel sheet. Tell me who like to scroll every time up to see/confirm which cell we are selecting. None, correct because this is an issue of usability or user experiences after all.

Modern Website Needs “Freeze” Style Navigation Menu

Technically, when we apply Freeze Panes options, we make that row or column sticky at their original places and push rest of the elements behind to scroll freely. It gives layering appearance/experiences in the document. In modern era, our new tech-savvy generation users also expecting the same robust experiences with the main menu of the website.

They don’t like to go frequently up and down in order to select/click navigation bar on big devices like desktop or laptop. Reasons are simple we have lengthy web pages in order to meet the needs of highly informative and in-depth content or to show huge numbers of products on e-commerce stores. This is simple usability issue, but affect greatly. Let’s see how we can solve this issue using modern jQuery and CSS designing or scripting techniques.

Use of CSS3

Perhaps, CSS is offering excellent opportunity to make sticky navigation with lightweight and quick code. What you have to do is to give fixed value to the position attribute. Manage the margin-top to fill the gap and create sticky class or use z-index to assure the top position of navigation in all layers of content. Of course, adding transition smooth the changes by animating it.

header{
position: fixed;
margin-top: 0px;
z-index: 10;
}
header.sticky {
margin-top: 50px;
transition: all 0.4s ease;
}

Now, what we need is jQuery to toggle the class sticky by detecting scrolling position of the web page. In simple logic, if you don’t scroll the page at the beginning it will show value less than 1 (one) so jQuery will remove the class sticky and keep fixed position. When you scroll the page down, it get value more than 1 (one) and add class sticky in to the CSS.

$(window).scroll(function()  {
if ($(this).scrollTop() > 1) {
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});

The most obvious benefit of jQuery against the JavaScript is that it is allowed on all the modern mobile browsers, whereas JavaScript may be forbidden in many browsers, and in case of many visitors’ devices for personal reasons.

If you are opting for robust floating header/navigation bar, you have a nice jQuery plugin to help you – Waypoint. However, things may become complex at coding because you have to put navigation bar in to a container so above given method is workable in most of the cases and tested them successfully.

References & More Reading
How to create an animated sticky header, with CSS3 and jQuery
Sticky Menus Are Quicker To Navigate
Create a Sticky Navigation Header Using jQuery Waypoints