How to solve the problem of page jitter caused by dynamically setting elements fixed in JavaScript?

JavaScript dynamically set page jitter caused by element fixed and solutions

In JavaScript, dynamically setting element position: fixed based on window scrolling events may cause page jitter. This is because the height changes in the page content trigger layout reordering and redrawing, causing visual flickering. Here is a common scenario:

 window.addEventListener('scroll', this.handleTabFix);

handleTabFix() {
  let timeout = null;
  clearTimeout(timeout);
  timeout = setTimeout(() => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    const offsetTop = document.querySelector('#testNavBar')?.offsetTop 60;
    this.isFixTab = scrollTop > offsetTop;
    // When this.isFixTab is true, set the element to fixed
  }, 1000);
}

In the code, the scroll event triggers the handleTabFix function, and determines whether to set the element to fixed based on the scroll position. However, this approach may cause repeated changes in the page height, causing tremor.

This kind of jitter is usually because after the element becomes fixed , the page content height decreases, causing the page to recalculate the height, which in turn triggers the publishing update and repeats the cycle.

There are two main solutions:

1. Use position: sticky : Change the positioning method of the element sticky . sticky positioning combines the characteristics of relative and fixed . The element will automatically become fixed after reaching the specified offset, but will not affect the overall height of the page, thereby avoiding jitter.

2. Add a fixed height container for an element: Add a parent container for the element that needs to be set to fixed and set a fixed height for the container. In this way, even if the element becomes fixed , the container still occupies the original space, preventing page height from changing, thereby eliminating jitter.

Selecting any of the above methods can effectively solve the problem of page jitter when setting the fixed element positioning in JavaScript dynamically, improving the user experience.

The above is the detailed content of How to solve the problem of page jitter caused by dynamically setting elements fixed in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!