He traducido un código de jquery a vanilla.
Todo parece estar bien, pero tengo un error "Array.prototype.forEach callback must be a function" en la última línea. No alcancé a arreglarlo.
¿Cuál sería esta línea jquery, en vainilla:
// start intersection observer for each anchor section $('.hack4-cms-anchor-section').each((i,sec) => observer.observe(sec) ); });Aquí está el código completo (la línea en cuestión es la última):
document.addEventListener("DOMContentLoaded", () => { const linkTextArr = []; // for each filter button var navlinkbtn = document.querySelectorAll('.navlink_button'); Array.prototype.forEach.call(navlinkbtn, function(link, index){ // get its text content and reformat to a valid ID let linkText = link.textContent.replace(/\W/g,'_').toLowerCase(); // set the reformatted linkText as the link href attribute link.setAttribute('href', '#'+linkText); // push reformatted linkText to array linkTextArr.push(linkText); }); // for each section var hack4cmsanchorsection = document.querySelectorAll('.hack4-cms-anchor-section'); Array.prototype.forEach.call(hack4cmsanchorsection, function(index, link){ // set id attribute to linkTextArray value sequentially // 1st sectn gets id: linkTextArr[0] etc.. var section = document.getElementsByTagName('section'); section.id = linkTextArr + [index]; }); // set up intrsctn obsrvr // (navlnk btn s'allum qd sur sectn) // 2 observ whn th anchor sectns ar in viewport let observer = new IntersectionObserver((entries, observer) => { // for each anchor section entries.forEach(entry => { // if it's in the viewport if(entry.isIntersecting){ // remov active class from current active link document.querySelector('.navlink_button.hack4-active').classList.remove('hack4-active'); // add active class to current active link document.querySelector(`.navlink_button[href='#${entry.target.id}']`).classList.add('hack4-active'); } }); // set thrshld to 1 ensures the whole anchor section // is in viewport befor adding activ class to activ link // this part ', {threshold: 1}' is optional }, {threshold: 0}); // start intersection observer for each anchor section hack4cmsanchorsection.forEach.call((i,sec) => observer.observe(sec) ); });