当JavaScript已经被触发一次时,JavaScript是否继续在滚动上触发if语句?

我在滚动标题上修复了2:

var header = document.getElementsByClassName("header");

function headerChange(){
  if(header[1].getBoundingClientRect().top <= 70){
    header[0].classList.add("fixed-removal");
  } else {
  header[0].classList.remove("fixed-removal");
  
  }
  
  if(header[0].getBoundingClientRect().top <= -70){
    header[1].classList.add("fixed-add");
  } else {
  header[1].classList.remove("fixed-add");
  }
}

document.addEventListener("scroll", headerChange);
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.header {
 width: 100%;
 height: 70px;
 font-family: Arial, sans-serif;
 font-size: 2em;
}

.content {
width: 100%;
height: 100%;
background-color: yellow;}

.header:nth-of-type(1){
  position: fixed;
  background-color: dodgerblue;
}

.header:nth-of-type(2){
  background-color: red;
}

.fixed-removal {
  position: absolute !important;
  bottom: 0;
}

.fixed-add {
  position: fixed;
  top: 0;
}

.content:nth-of-type(2){
margin-bottom: 200px;
}
<header class="header">HEADER 1</header>
<div class="content"></div>
<header class="header">HEADER 2</header>
<div class="content"></div>

一切都很好……这就是问题所在.现在我只有2个滚动固定标题,但是当我有更多标题时,JavaScript是否继续触发if / else语句滚动?我担心CPU性能,这就是原因.
我不希望它无缘无故地运行,只是为了节制性能.特别是那个别的说法.

请不要jQuery回答

最佳答案
当滚动事件监听器一直触发滚动时,您的函数也将被调用.

通过使用受限制的事件处理程序,您可以承担大量的工作量,并选择应该调用函数的速率.

这是一个使用setTimeout,借用于:

> https://developer.mozilla.org/en-US/docs/Web/Events/resize#setTimeout

请注意,在上面的链接中,您将找到有关如何限制处理程序的更多版本

堆栈代码段

var header = document.getElementsByClassName("header");

function headerChange(){
  if(header[1].getBoundingClientRect().top <= 70){
    header[0].classList.add("fixed-removal");
  } else {
  header[0].classList.remove("fixed-removal");
  
  }
  
  if(header[0].getBoundingClientRect().top <= -70){
    header[1].classList.add("fixed-add");
  } else {
  header[1].classList.remove("fixed-add");
  }
}

(function(timeout) {

  window.addEventListener("scroll", scrollThrottler, false);

  function scrollThrottler() {
    // ignore scroll events as long as an actualScrollHandler execution is in the queue
    if ( !timeout ) {
      timeout = setTimeout(function() {
        timeout = null;
        actualScrollHandler();
     
       // The actualScrollHandler will execute at a rate of 15fps
       }, 66);
    }
  }

  function actualScrollHandler() {
    // handle the resize event
    headerChange();
  }

}());
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

.header {
 width: 100%;
 height: 70px;
 font-family: Arial, sans-serif;
 font-size: 2em;
}

.content {
width: 100%;
height: 100%;
background-color: yellow;}

.header:nth-of-type(1){
  position: fixed;
  background-color: dodgerblue;
}

.header:nth-of-type(2){
  background-color: red;
}

.fixed-removal {
  position: absolute !important;
  bottom: 0;
}

.fixed-add {
  position: fixed;
  top: 0;
}

.content:nth-of-type(2){
margin-bottom: 200px;
}
<header class="header">HEADER 1</header>
<div class="content"></div>
<header class="header">HEADER 2</header>
<div class="content"></div>

转载注明原文:当JavaScript已经被触发一次时,JavaScript是否继续在滚动上触发if语句? - 代码日志