React Navbar fade out when scroll down

In this video, we are going to create a navbar with the effect of fading out when the user scroll down more than 100px. 00:00 Introduction 01:36 Create Navbar component 03:19 Fix the navbar to the top 03:47 Use useState to add the state show 04:22 Create function to check whether scroll Y is greater than 100 04:32 use useEffect and add scroll event listener when component is mounted 06:00 Add the transition effect in CSS

source code: https://github.com/cyrus8050/yt-react-navbar-transition.git

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 🔥Complete Courses🔥 ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ React native Expo for multiplatform mobile app development https://www.udemy.com/course/react-native-expo-for-multiplatform-ios-android-mobile-app-development/?referralCode=2FA276AA4E55CE5A2A39

Complete NodeJS course with express, socket io and MongoDB https://www.udemy.com/course/create-nodejs-app-with-express-socket-io-and-mongodb/?referralCode=4B0B97AD4B1908DD6588

Complete Progress Web App BootCamp https://www.udemy.com/course/complete-progressive-web-app-bootcamp/?referralCode=E04DAFEDCE920AB6EA55

Complete Modern JavaScript BootCamp from the beginning https://www.udemy.com/course/complete-modern-javascript-with-firebase-bootcamp-for-beginners/?referralCode=6AF7AA3DB6AD6B880D66

React - The Complete Guide with React Hook Redux 2020 in 4hr https://www.udemy.com/course/complete-react-course-w-hooks-react-router-redux-usecontext/?referralCode=B192869617ADE079536F

Vue JS and Firebase:Build an iOS and Android chat app [2020] https://www.udemy.com/course/vuejs-and-firebase-build-an-ios-and-android-chat-app/?referralCode=D959334D3BC5DB1FDF53

New SAT Math Course https://www.udemy.com/course/new-sat-math-complete-course/?referralCode=4E1A982C127EA13EB3D8

New SAT Math Practice Test Explain https://www.udemy.com/course/new-sat-maths-explain/?referralCode=ABD0C235875F55CB6F5F

Get A* in GCSE Maths (Quadratic equations and graph) https://www.udemy.com/course/get-a-in-gcse-maths-quadratic-equations-and-graph/?referralCode=2E4D7672FE3571F59DF8

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ 💟Follow me ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ ‣‣ Udemy ► https://www.udemy.com/user/cyruschan2/ ‣‣ Twitter ► https://twitter.com/ckmobilejavasc1 ‣‣ Facebook ► https://www.facebook.com/javascript.ck/ ‣‣ Instagram ► https://www.instagram.com/ckmobile8050/

Equipment that I use

Macbook Pro

https://amzn.to/2CC41HV

Blue Yeti USB mic

https://amzn.to/3jf3gph

Camtasia

https://amzn.to/30aopbg

#javascript #webdevelopement ... https://www.youtube.com/watch?v=qjJBKC3I9gE