Sticky Navbar Tutorial

Sticky positioned elements is a combination of relative and fixed positioning. Lets understand what that means. When a element is positioned as sticky with CSS3, a threshold value is also added along it. Initially the element behaves like a normal Relative positioned element. Now as you scroll your webpage, when the page reaches the set threshold the element gets stick to that positioned and so the position behavior changes from relative to fixed.

Introduction

Lets briefly understand what we are going to develop. Simple as that, we will have a navigation bar fixed at a certain position. Now as your scroll your page, the navbar scrolls as well. Now obviously, we don't want to hide our navbar from user coz' that is the guide to browse across our page. So instead of letting the navbar scroll beyond the browser viewport, we will be sticking the navigation bar to the top. And as you scroll up your contents gets scrolled up while the bar will always be visible at the top. Now lets see what are we going to use for the development

HTML -- HyperText Markup Language

In this tutorial, We have used HTML and CSS to develop sticky navigation Menu. We've made use of sticky positioning for that purpose

CSS -- Cascading StyleSheet

Sticky position is relatviely new to CSS. This is just a hybrid form of relative and fixed position which changes at a preset threshold.

JS -- JavaScript

This tutorial teaches the development of sticky navigation bar with just HTML and CSS. We will be making no use of JavaScript at all. Though most web developers use JavaScript for sticky navigation menu since the sticky concept on CSs is relatively new.

Web Development Introduction

It's Amazing how Web has reached to every corner of the world flourishing the infromation. Imagine how our life could have been, had there not been websites to search visit when you are in deperate need for answers or when you are bored. I find myself engrossed in this web entagnlement and get amazed at this wonderous achievement of human. If you are reading this portion, Then seriously? What's wrong with You? Focus on Development Section. Not within these Paragraphs. These are Just some Fillers