Skip to main content

Make Bootstrap's Navbar Sticky in React with JavaScript

If you need instructions on how to setup Bootstrap's navbar, follow my previous post.

We'll start by creating the Navigation component.

import React from 'react'; import './Navigation.css'; let navbar; let sticky; class Navigation extends React.Component {     render() {        return(             <nav                  id="main-navigation"                  className="navbar navbar-expand-lg navbar-light"             > ...

We needed to import the Navigation.css file. This is where we'll create our sticky CSS class.

/* The sticky class is added to the navbar with JS when it reaches its scroll position */ .sticky {     positionfixed;     top0;     width100%;     z-index100; }

We created our variables, navbar and sticky. They will be initialized after the page renders. Next, we'll need to add the componentDidMount() lifecycle method to the Navigation class. This will initialize the navbar and sticky variables and add the scroll event listener to our navigation.

class Navigation extends React.Component {     componentDidMount() {         navbar = document.getElementById("main-navigation");         sticky = navbar.offsetTop;         window.addEventListener('scroll'this.handleSticky);     }     componentWillUnmount() {         window.removeEventListener('scroll'this.handleSticky);     }

The event listener will call the handle sticky function. We also add the componentWillUnmount() lifecycle method to remove the event listener.

class Navigation extends React.Component {     componentDidMount() {         navbar = document.getElementById("main-navigation"); // Get the navbar         sticky = navbar.offsetTop// Get the offset position of the navbar         window.addEventListener('scroll'this.handleSticky);     }     componentWillUnmount() {         window.removeEventListener('scroll'this.handleSticky);     }     /**      * Adds the sticky CSS class to the navbar when it reaches the top of it      */     handleSticky = () => {         if (window.pageYOffset > sticky) {             navbar.classList.add("sticky")         } else {             navbar.classList.remove("sticky");         }     }

And that's it. It should work just like Bootstrap 4's sticky-top class.

Comments

Popular posts from this blog

Beginner Java Exercise: Sentinel Values and Do-While Loops

In my previous post on while loops, we used a loop-continuation-condition to test the arguments. In this example, we'll loop at a sentinel-controlled loop. The sentinel value is a special input value that tests the condition within the while loop.

To jump right to it, we'll test if an int variable is not equal to 0.

The data != 0 within the while (data != 0) { ... } is the sentinel-controlled-condition.

In the following example, we'll keep adding an integer to itself until the user enters 0. Once the user enters 0, the loop will break and the user will be displayed with the sum of all of the integers that he/she has entered.



As you can see from the code above, the code is somewhat redundant. It asks the user to enter an integer twice: Once before the loop begins, and an x amount of times within the loop (until the user enters 0).

A better approach would be through a do-while loop. In a do-while loop, you "do" something "while" the condition is true. S…

How to Install and use phpDocumentor

If you have Windows, and are running WAMP, this is the step by step installation guide to getting phpDocumentor to work. This write-up assumes that you have WAMP installed and working.
Download Composer from https://getcomposer.org/Run through the installation with the default settings. It will locate php for you automatically. If you're having any issues with the install, Google the response. There shouldn't be any errors though.If you have CMD opened, close it now.Open CMD and type in composer. If something starts happening, Composer is installed correctly.Go to the directory that you want to install phpDocumentor.In your project directory, create a JSON file. Name it, composer.json and add the following code to it
{"require-dev":{"phpdocumentor/phpdocumentor":"2.*"}}For example, let's say that your project directory is located in C:/wamp/www/your_project, you're going to want to open CMD and make sure that you've navigated to that dir…

Programming Language Concepts Test Questions/Answers

One of the easiest methods that I use to learn new topics is by creating notes on the subject and then by turning those notes into questions and answers. Remembering answers to questions just seems more natural. I was able to memorize 323 questions and answers in a matter of a couple of days. I wanted to start doing this for some topics that I find pretty interesting. To begin, here are some questions and answers to Programming Language Concepts (PLC). I'm reading your mind right now and the answer is yes, there will be more.
1. Name 3 reasons for studying PLC. - Better understanding of current programming languages - Advancement of computing - Increased capability to express ideas - Increased capability to learn new programming language. - Better understanding of which programming language to choose. 
2. Name the 5 programming domains and languages best suited for each. - Scientific (Fortran, ALGOL 60)
- Business (COBOL)
- AI (Lisp, Scheme, Prolog)
- Web (PHP, Java, JavaScript)
- Ga…