JavaScript is causing a performance problem when attempting to hide the header while scrolling

Question

JavaScript is causing a performance problem when attempting to hide the header while scrolling

In my attempt to create a navigation bar, I have specific requirements:

It should start with a large height
Disappear when scrolled down
Show a smaller version when scrolling back up
Expand to full height when fully scrolled to the top

I have managed to achieve this by using a function to hide and show the navigation bar, along with an interval to expand it again when reaching the top. However, I believe there might be a more efficient way to combine these actions. Any suggestions would be greatly appreciated!

HTML

<!DOCTYPE html>
  <html>
    <head>
      <title>Test</title>
    </head>
    <body>
      <header id="navbar" class="navbar">
        <a href="#home">Home</a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
      </header>
    </body>
  </html>

JavaScript

var prevScrollpos = window.pageYOffset;
var shrinkHeader = 200;
function tellMeAStory() {
}

window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-200px";
    $('.navbar').addClass('shrink');
  }

  prevScrollpos = currentScrollPos;
}

setInterval(function(){
  var scroll = getCurrentScroll();
   if (scroll < 10){
    $('.navbar').removeClass('shrink');
  } else {}
},250)

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
    };

CSS

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 2000px;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: 200px;
}

.grow{
  height: 200px;
}

.shrink{
  height: 50px;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

JSFiddle

https://jsfiddle.net/Jimmey/wry54an7/4/

javascript jquery html css performance

Answer 1

Answer №1

Here are a few enhancements I recommend implementing:

Consider removing jQuery for simply adding or removing a class.
Make sure to cache your selectors, especially within loops.
Implement scroll event throttling to avoid excessive firing.
Eliminate the unnecessary setInterval function in your code.

var prevScrollpos = getCurrentScroll();
var shrinkHeader = 200;
var ticking = false;

// Cache selectors to minimize on-scroll computations
var navbar = document.getElementById('navbar');

window.addEventListener('scroll', function() {
  var currentScrollPos = getCurrentScroll();

  if (!ticking) {
    window.requestAnimationFrame(function() {
      if (prevScrollpos > currentScrollPos) {
        navbar.style.top = '0';
      } else {
        navbar.style.top = '-200px';
        navbar.classList.add('shrink');
      }

      if (currentScrollPos < 10) {
        navbar.classList.remove('shrink');
      }

      prevScrollpos = currentScrollPos;
      ticking = false;
    });

    ticking = true;
  }
});

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
};

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 2000px;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: 200px;
}

.grow {
  height: 200px;
}

.shrink {
  height: 50px;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<header id="navbar" class="navbar">
  <a href="#start">Start</a>
  <a href="#one">One</a>
  <a href="#two">Two</a>
</header>

Answer 2

Here are a few enhancements I recommend implementing:

Consider removing jQuery for simply adding or removing a class.
Make sure to cache your selectors, especially within loops.
Implement scroll event throttling to avoid excessive firing.
Eliminate the unnecessary setInterval function in your code.

var prevScrollpos = getCurrentScroll();
var shrinkHeader = 200;
var ticking = false;

// Cache selectors to minimize on-scroll computations
var navbar = document.getElementById('navbar');

window.addEventListener('scroll', function() {
  var currentScrollPos = getCurrentScroll();

  if (!ticking) {
    window.requestAnimationFrame(function() {
      if (prevScrollpos > currentScrollPos) {
        navbar.style.top = '0';
      } else {
        navbar.style.top = '-200px';
        navbar.classList.add('shrink');
      }

      if (currentScrollPos < 10) {
        navbar.classList.remove('shrink');
      }

      prevScrollpos = currentScrollPos;
      ticking = false;
    });

    ticking = true;
  }
});

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
};

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 2000px;
}

header {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  display: block;
  transition: all 0.3s;
  height: 200px;
}

.grow {
  height: 200px;
}

.shrink {
  height: 50px;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<header id="navbar" class="navbar">
  <a href="#start">Start</a>
  <a href="#one">One</a>
  <a href="#two">Two</a>
</header>

Answer 3

Answer №2

Combining them is not a difficult task at all. One effective method is:

var prevScrollpos = window.pageYOffset;
var shrinkHeader = 200;

window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (currentScrollPos < 10){
    $('.navbar').removeClass('shrink');
  }
  else if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-200px";
    $('.navbar').addClass('shrink');
  }

  prevScrollpos = currentScrollPos;
}

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
};

Another suggestion would be to track the last operation and, if it's the same, avoid making any unnecessary changes to the DOM (this can improve performance).

Using classes instead of inline styles is considered a best practice. You may want to utilize classes for displaying/hiding the bar. By having just 3 classes, you can eliminate the need for inline styles entirely:

Check out this Fiddle example demonstrating the use of classes.

Answer 4

Combining them is not a difficult task at all. One effective method is:

var prevScrollpos = window.pageYOffset;
var shrinkHeader = 200;

window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (currentScrollPos < 10){
    $('.navbar').removeClass('shrink');
  }
  else if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-200px";
    $('.navbar').addClass('shrink');
  }

  prevScrollpos = currentScrollPos;
}

function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
};

Another suggestion would be to track the last operation and, if it's the same, avoid making any unnecessary changes to the DOM (this can improve performance).

Using classes instead of inline styles is considered a best practice. You may want to utilize classes for displaying/hiding the bar. By having just 3 classes, you can eliminate the need for inline styles entirely:

Check out this Fiddle example demonstrating the use of classes.

JavaScript is causing a performance problem when attempting to hide the header while scrolling

Answer №1

Answer №2

Similar questions

What is the best way to connect CSS properties to an image using JavaScript?

Reverting back to the specified CSS style

Incorporate a 'back' button in the tab content of vue-form-wizard

What is the proper way to transfer data to PHP using AJAX?

Troubleshooting Symfony2 and Assetic: Why are my CSS-linked images not loading?

Guide on setting up create-next-app with version 12 instead of the latest version 13

Adjust the height of the floating div to completely occupy the space below it

Seeking assistance in the development of a visual depiction of device orientation through JS

Guide on incorporating a PNG logo into the Tailwind CSS navbar using Next.js

fetch recently uploaded images from the server

How numerous data attributes are available within Bootstrap? What functions do they perform and what possible values can be assigned to them?

Generating a Simulation of a Computer Screen Embedded Within a Webpage

Invoke a server-side function with JavaScript or jQuery

Generate arrays by extracting each individual value from a multidimensional array based on their corresponding index objects

Incorporate a sidebar navigation menu within the WordPress media uploader

I attempt to demonstrate to my users, but unfortunately, it doesn't seem to be successful

What is the process for adjusting the input value dynamically in reactjs?

Incorporating ClojureScript seamlessly within a JavaScript framework

Comparing the size of an array property in Mongoose with another property's size

Guide to utilizing reactstrap exclusively for a specific component within ReactJS