After implementing a position: fixed on-scroll feature for my navbar, I noticed an error being thrown by the DOM stating: [Violation] Forced reflow while executing JavaScript took ms during every scroll event. It seems that this could be caused by layout thrashing and constant recalculation.
My main concern is whether or not this issue poses a significant problem. Despite searching for solutions online, I have been unable to find a way to eliminate this violation. I'm curious if this issue is common when dealing with scroll offsets.
Below is the code snippet I am using:
document.addEventListener('DOMContentLoaded', function() {
window.addEventListener('scroll', addPositionFixed);
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function addPositionFixed() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
})