Kevin Powell - Community•3y ago

How to setup this template literals?

I used the variable "sections" to store the id of each section(line26), and it works. I tried to make a declaration in line29 by forEach loop, the form should be like line25(or any other suggestion?), but this time it's fail to work. Can anyone please give me some ideas?

6 Replies

William_O^2•3y ago

Same problem in line35, the headerHeight in a variable, but how to reference here?

MarkBoots•3y ago

I think you are overthinking it.

const sections = document.querySelectorAll("section");
sections.forEach(section => {
  //here you can do everything you want with the section. no queryselect nessessary
  const id = section.id;
  console.log(id);
})

const sections = document.querySelectorAll("section");
sections.forEach(section => {
  //here you can do everything you want with the section. no queryselect nessessary
  const id = section.id;
  console.log(id);
})

William_O^2•3y ago

Thanks for your replying. This is the first step to setup declarations for the IntersectionObserver. Here is the fully context , you will see I have to repeat it in line62-69. I don't want make chunk of repeat code so I can reusing the code in future. Or any other suggestions(First time touch the IntersectionObserver, maybe some misunderstanding here😅 )? https://github.com/CodingFish1/RWD-SAMPLE-2/blob/main/app/assets/js/all.js

GitHub

RWD-SAMPLE-2/all.js at main · CodingFish1/RWD-SAMPLE-2

Contribute to CodingFish1/RWD-SAMPLE-2 development by creating an account on GitHub.

MarkBoots•3y ago

not working with it much either. But isnt this what you want (check console) https://codepen.io/MarkBoots/pen/Jjvpxxo?editors=1011

Mark Boots

CodePen

Jjvpxxo

...

William_O^2•3y ago

Hi, I've spent several hours on it but don't get the idea. The current solution has disorder problems, when I scroll the page in sequence, the order is correct. But when I scroll the page up and down randomly, the result will be wrong. The photo illuminates this problem, when I walk to section 5 then go back, the order becomes section 3 rather than section 4.

William_O^2•3y ago

After reading this article, I think should I need a function to determine the direction of scrolling? Since the author uses an iframe to make the example, I don't know how to modify the scrollRoot.scrollTop:https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/

Smashing Magazine

Building A Dynamic Header With Intersection Observer — Smashing Mag...

In JavaScript, attaching an event listener to constantly fire a callback on scroll can be performance-intensive. But there is a better way with Intersection Observer.

Gaming

Programming

How to setup this template literals?