滚动添加类到数组的每个元素

问题描述

大家好，我尝试使用香草javascript在视图上显示元素后将其添加到元素中

<main>
        <section class="fs-sect" data-name="Banana"></section>
        <section class="fs-sect" data-name="Apple"></section>
        <section class="fs-sect" data-name="Avocado"></section>
        <section class="fs-sect" data-name="Orange"></section>
        <section class="fs-sect" data-name="Grapes"></section>
    </main>

这是我的部分列表，一旦我滚动到每个部分，我想添加一个活动的类并从其他任何部分中删除该类

<script>
const Myarray = document.querySelectorAll('.fs-sect');
// convert NodeList to array and map it
const Newarray = Array.from(Myarray).map((num,index) =>{
    const dataname = num.dataset.name;
    const myoffset = num.offsetTop;

    window.onscroll = function (e) {  
        let position_y = window.scrollY;
        if(position_y >= myoffset){
            document.querySelectorAll('.fs-sect').classList.remove('active-section');
            num.classList.add('active-section');
        } 
        console.log(position_y);
    } 
    return (
        //using index as ID and displaying data-attribute with offset position
        console.log(`I am a ${dataname} and my ID is ${index} and Im positioned at ${myoffset}`)
    );
});
</script>

我只设法循环到数组中以获取每个元素的索引element.offset，但滚动后仍需要添加一个类，

感谢您的帮助

解决方法

if(position_y >= myoffset){
        document.querySelectorAll('.fs-sect').forEach(item => item.classList.remove('active-section'));
        num.classList.add('active-section');
    }.

尝试此操作，您会错过querySelectorAll上的forEach

,

工作示例。注意：类更改仅在Developer工具中可见。

/* Prepare: */

function posY(elm) {
  var test = elm,top = 0;

  while (!!test && test.tagName.toLowerCase() !== "body") {
    top += test.offsetTop;
    test = test.offsetParent;
  }

  return top;
}

function viewPortHeight() {
  var de = document.documentElement;

  if (!!window.innerWidth) {
    return window.innerHeight;
  } else if (de && !isNaN(de.clientHeight)) {
    return de.clientHeight;
  }

  return 0;
}

function scrollY() {
  if (window.pageYOffset) {
    return window.pageYOffset;
  }
  return Math.max(document.documentElement.scrollTop,document.body.scrollTop);
}

function checkVisible(elm,eval) {
  eval = eval || "visible";
  var vpH = viewPortHeight(),// Viewport Height
    st = scrollY(),// Scroll Top
    y = posY(elm),elementHeight = elm.offsetHeight;

  if (eval == "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
  if (eval == "above") return ((y < (vpH + st)));
}

let sectionsVisible = '';

// Onscroll

const onscroll = function(e) {
  let sections = document.querySelectorAll('.fs-sect');
  let visibleSections = [];
  for (let section of sections) {
    const isVisible = checkVisible(section);
    section.classList.toggle('active-section',isVisible);
    if (isVisible) visibleSections.push(section.getAttribute('data-name'));
  }
  if (sectionsVisible != visibleSections.join(',')) {
    sectionsVisible = visibleSections.join(',');
    console.log('Visible:',sectionsVisible);
  }
};

window.onscroll = onscroll;
onscroll();

section {
  height: 150px;
  background-color: #EEE;
  margin-bottom: 10px;
  position: relative;
}

section:after {
  display: block;
  position: absolute;
  right: 4px;
  top: 4px;
  content: attr(data-name);
}

section.active-section {
  background-color: #666;
  color: white;
}

<main>
  <section class="fs-sect" data-name="Banana"></section>
  <section class="fs-sect" data-name="Apple"></section>
  <section class="fs-sect" data-name="Avocado"></section>
  <section class="fs-sect" data-name="Orange"></section>
  <section class="fs-sect" data-name="Grapes"></section>
</main>