Channel: Thapa Technical

Category: Education

Tags: sticky navbarsticky navbar website

Description: Welcome guys, Today in this video we are going to creating sticky navbar. What is sticky navbar? A sticky menu is a fixed navigation menu on a webpage that remains visible and in the same position as the user scrolls down and moves about a site. Persistent navigation bars – or “sticky headers” – are now a web design standard. First of all we will create a class named sticky and it will target to the body then we will give fixed position to the navbar. Now,we want that the navbar will stick to the top only when we go to another section rather than home section. So for achieving it we will use Intersection observer API. What is Intersection observer API? The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. 👉 Website Development Course Playlist: youtube.com/playlist?list=PLwGdqUZWnOp2jmYb2TQGYgBYp0xGwj9V1 ♥ Free Source Code & Discord Server Link: thapatechnical.com/2022/03/web-development-course-in-hindi-in-2022.html 😍 Check my Instagram to Connect with me: instagram.com/thapatechnical 00:00 Introduction 00:12 What is sticky navbar? 01:24 Applying position in css 04:02 Styling the navbar 05:44 What is Intersection observer API? 07:00 Using intersection observer api 16:33 Giving margin top 18:11 Conclusion 18:42 Outro