⚡ Javascript Scroll Navbar

• Wes Bos Youtube Tutorial: Vanilla JavaScript Sticky Nav - #JavaScript30 24/30.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Javascript Scroll Navbar
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Tutorial Code to add a class to change the nav bar when the user scrolls. Also changes the width of the text div.

📷 Screenshots

.

📶 Technologies

• Javascript v1.9 ECMA-262 ECMAScript 2018

💾 Setup

• Open index.html in browser. If any code is changed the browser needs to be refreshed.

💻 Code Examples

• compares scroll position with top of Navigation and adds the 'fixed-nav' class when they are equal.

fixNav = () => {
  console.log('window.scrollY', window.scrollY, 'topOfNav', topOfNav);
  if(window.scrollY >= topOfNav) {
    console.info('window.scrollY >= topOfNav');
    document.body.style.paddingTop = nav.offsetHeight + 'px';
    document.body.classList.add('fixed-nav'); 
  } else {
    document.body.style.paddingTop = 0;
    document.body.classList.remove('fixed-nav'); 
  }
}

🆒 Features

• At about scrollY = 337px the css class change occurs to 'fixed-nav'.

📋 Status & To-Do List

• Status: Working.
• To-Do: Nothing

👏 Inspiration

• Wes Bos Youtube Tutorial: Vanilla JavaScript Sticky Nav - #JavaScript30 24/30

📁 License

• N/A

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com