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 {     position: fixed;     top: 0;     width: 100%;     z-index: 100; }

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

Post a Comment

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...
14 comments
Read more

Laravel 6.x with React and react-router

This will get you started on getting your first React/Laravel application deployed to your server. We'll cover everything from installation to deployment. Start by reading the installation instructions on  https://laravel.com/docs/6.x#installing-laravel . We'll cover those details below. Setting Up Laravel Check that you have the latest version of PHP installed on your computer.  It must be >= 7.2.0. Open terminal to get the Laravel installation tool. Type in composer global require laravel/installer Type in laravel to verify installation. Navigate to a directory on your computer where you want to install your project on your terminal. Run the following command: laravel new project_name (replace project_name with your project name). Once complete, cd into your new project. Type the following command: php artisan serve. You'll get a message like the following if it's running successfully: Laravel development server started: http://127.0.0.1:8000 ...
54 comments
Read more

Creating your own ArrayList in Java

Wanted to show that certain data structures in Java can be created by you. In this example, we'll go ahead and create an ArrayList data structure that has some of the methods that the built in ArrayList class has. We'll create 2 constructors: The default constructor that creates an ArrayList with a default size of 10. Constructor that allows an initial size to be passed to the array. We'll also create a number of methods: void add(Object x);  A method that allows you to place an Object at the end of the ArrayList. void add(int index, Object x);  A method that allows you to place a value at a given location. Object get(int index):  Allows you to retrieve a value of the arrayList array from a given location. int size();  Allows you to get the number of elements currently in the Arraylist. boolean isEmpty();  Tests to see if the Arraylist is empty. boolean isIn(Object x);  A method that sees if a particular object exist in the arrayList. int ...
49 comments
Read more