Javascript垂直滚动功能_Javascript_Function_Scroll_Setinterval_Vertical Scrolling

Javascript垂直滚动功能

javascript function scroll

Javascript垂直滚动功能,javascript,function,scroll,setinterval,vertical-scrolling,Javascript,Function,Scroll,Setinterval,Vertical Scrolling,我正在尝试使用JavaScript检测页面上的滚动。这样，当用户滚动一定数量的页面时，我可以更改某些元素的类和属性。这是我的JS函数： function detectScroll() { var header = document.querySelector(".headerOrig"), header_height = getComputedStyle(header).height.split('px')[0], fix_class = "ch

我正在尝试使用JavaScript检测页面上的滚动。这样，当用户滚动一定数量的页面时，我可以更改某些元素的类和属性。这是我的JS函数：

    function detectScroll() {
    var header = document.querySelector(".headerOrig"),
        header_height  = getComputedStyle(header).height.split('px')[0],
        fix_class = "changeColor";

    if( window.pageYOffset > header_height ) {      
        header.classList.add(fix_class);
    }
    if( window.pageYOffset < header_height ) {
        header.classList.remove(fix_class);
    }
    var change = window.setInterval(detectScroll, 5000);
}

功能检测滚动（）{
var header=document.querySelector（“.headerRig”），
页眉高度=getComputedStyle（页眉）.height.split（'px'）[0]，
fix_class=“changeColor”；
如果（window.pageYOffset>header_height）{
header.classList.add（修复类）；
}
if（window.pageYOffset<页眉高度）{
header.classList.remove（修复类）；
}
var变更=窗口设置间隔（检测滚动，5000）；
}

我在加载页面时调用它：

<body onload="detectScroll();">

但是，我有这个问题-我需要设置一个非常小的间隔，以便调用函数并立即更改类。但随后页面冻结，除了JS函数之外的所有功能都运行得非常缓慢。有没有更好的办法在JavaScript中实现这一点

感谢您的建议。

使用

onscroll

而不是

onload

，这样您就不需要每隔一段时间调用函数。如果使用

onscroll

<body onscroll="detectScroll();">

使用

onscroll

而不是

onload

，因此不需要以一定的间隔调用函数。如果使用

onscroll

<body onscroll="detectScroll();">

如果函数以递归方式添加间隔，则应通过以下方式向滚动事件添加事件侦听器：

function detectScroll() {
    var header = document.querySelector(".headerOrig"),
        header_height  = getComputedStyle(header).height.split('px')[0],
        fix_class = "changeColor";

    if( window.pageYOffset > header_height ) {      
        header.classList.add(fix_class);
    }
    if( window.pageYOffset < header_height ) {
        header.classList.remove(fix_class);
    }

}
window.addEventListener("scroll",detectScroll);

功能检测滚动（）{
var header=document.querySelector（“.headerRig”），
页眉高度=getComputedStyle（页眉）.height.split（'px'）[0]，
fix_class=“changeColor”；
如果（window.pageYOffset>header_height）{
header.classList.add（修复类）；
}
if（window.pageYOffset<页眉高度）{
header.classList.remove（修复类）；
}
}
window.addEventListener（“滚动”，detectScroll）；

如果函数以递归方式添加间隔，则应通过以下方式向滚动事件添加事件侦听器：

function detectScroll() {
    var header = document.querySelector(".headerOrig"),
        header_height  = getComputedStyle(header).height.split('px')[0],
        fix_class = "changeColor";

    if( window.pageYOffset > header_height ) {      
        header.classList.add(fix_class);
    }
    if( window.pageYOffset < header_height ) {
        header.classList.remove(fix_class);
    }

}
window.addEventListener("scroll",detectScroll);

功能检测滚动（）{
var header=document.querySelector（“.headerRig”），
页眉高度=getComputedStyle（页眉）.height.split（'px'）[0]，
fix_class=“changeColor”；
如果（window.pageYOffset>header_height）{
header.classList.add（修复类）；
}
if（window.pageYOffset<页眉高度）{
header.classList.remove（修复类）；
}
}
window.addEventListener（“滚动”，detectScroll）；

您需要更改一些内容。首先，我们可以使用onscroll而不是interval。但是，您还需要尽可能多地缓存，以减少滚动条上的计算量。更进一步，您应该使用（或者对于较旧的浏览器，一般只使用“去盎司”——请参阅链接）。这确保您的工作仅在浏览器计划重新绘制时进行。例如，当用户滚动时，实际的滚动事件可能触发几十次，但页面只重新绘制一次。你只关心那一次重新油漆，如果我们能避免做其他X次的工作，它会更加平滑：

// Get our header and its height and store them once
// (This assumes height is not changing with the class change).
var header = document.querySelector(".headerOrig");
var header_height  = getComputedStyle(header).height.split('px')[0];
var fix_class = "changeColor";

// This is a simple boolean we will use to determine if we are
// waiting to check or not (in between animation frames).
var waitingtoCheck = false;

function checkHeaderHeight() {
  if (window.pageYOffset > header_height) {      
    header.classList.add(fix_class);
  }
  if (window.pageYOffset < header_height) {
    header.classList.remove(fix_class);
  }
  // Set waitingtoCheck to false so we will request again
  // on the next scroll event.
  waitingtoCheck = false;
}

function onWindowScroll() {
  // If we aren't currently waiting to check on the next
  // animation frame, then let's request it.
  if (waitingtoCheck === false) {
    waitingtoCheck = true;
    window.requestAnimationFrame(checkHeaderHeight);
  }
}

// Add the window scroll listener
window.addEventListener("scroll", onWindowScroll);

//获取标题及其高度并存储一次
//（假设高度不随类的变化而变化）。
var header=document.querySelector（“.headerOrig”）；
var header_height=getComputedStyle（header）.height.split（'px'）[0]；
var fix_class=“changeColor”；
//这是一个简单的布尔值，我们将使用它来确定
//正在等待检查或不检查（在动画帧之间）。
var waitingtoCheck=false；
函数checkHeaderHeight（）{
如果（window.pageYOffset>header_height）{
header.classList.add（修复类）；
}
if（window.pageYOffset<页眉高度）{
header.classList.remove（修复类）；
}
//将waitingtoCheck设置为false，以便我们再次请求
//在下一个滚动事件中。
waitingtoCheck=false；
}
函数onWindowScroll（）{
//如果我们目前没有等待检查下一个
//动画帧，然后让我们请求它。
if（waitingtoCheck==false）{
waitingtoCheck=true；
window.requestAnimationFrame（checkHeaderHeight）；
}
}
//添加窗口滚动侦听器
window.addEventListener（“滚动”，onWindowScroll）；

// Get our header and its height and store them once
// (This assumes height is not changing with the class change).
var header = document.querySelector(".headerOrig");
var header_height  = getComputedStyle(header).height.split('px')[0];
var fix_class = "changeColor";

// This is a simple boolean we will use to determine if we are
// waiting to check or not (in between animation frames).
var waitingtoCheck = false;

function checkHeaderHeight() {
  if (window.pageYOffset > header_height) {      
    header.classList.add(fix_class);
  }
  if (window.pageYOffset < header_height) {
    header.classList.remove(fix_class);
  }
  // Set waitingtoCheck to false so we will request again
  // on the next scroll event.
  waitingtoCheck = false;
}

function onWindowScroll() {
  // If we aren't currently waiting to check on the next
  // animation frame, then let's request it.
  if (waitingtoCheck === false) {
    waitingtoCheck = true;
    window.requestAnimationFrame(checkHeaderHeight);
  }
}

// Add the window scroll listener
window.addEventListener("scroll", onWindowScroll);

//获取标题及其高度并存储一次
//（假设高度不随类的变化而变化）。
var header=document.querySelector（“.headerOrig”）；
var header_height=getComputedStyle（header）.height.split（'px'）[0]；
var fix_class=“changeColor”；
//这是一个简单的布尔值，我们将使用它来确定
//正在等待检查或不检查（在动画帧之间）。
var waitingtoCheck=false；
函数checkHeaderHeight（）{
如果（window.pageYOffset>header_height）{
header.classList.add（修复类）；
}
if（window.pageYOffset<页眉高度）{
header.classList.remove（修复类）；
}
//将waitingtoCheck设置为false，以便我们再次请求
//在下一个滚动事件中。
waitingtoCheck=false；
}
函数onWindowScroll（）{
//如果我们目前没有等待检查下一个
//安尼