在滚动到数组的每个元素时添加 class

Question

大家好，我正在尝试使用 vanilla javascript

向视图中显示的元素添加 class

<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>

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

<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 但仍然需要在滚动后添加 class，

感谢您的帮助

Answer 1

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

试试这个，你错过了 querySelectorAll 上的 forEach

Answer 2

工作示例。注意：class 更改仅在开发人员工具中可见。

/* 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>

在滚动到数组的每个元素时添加 class

Adding class on scroll to each element of an array

javascript

loops

onscroll

array.prototype.map