How to fix a block after passing a certain part of the page in javascript??

Question

css

Hello, you need to fix the div block, but only after the user has scrolled a certain part of the page!

For example, in the header part there is no block that needs to be fixed,
it is in the content part,
and when scrolling through the entire content, it must be fixed, and when raised to the header area, it remains in the content

Answer 1

If I understand correctly what you need, then I cannot but say that one hundred thousand two hundred and three times this topic has been discussed.

document.addEventListener("scroll", function(){
    var elem = document.querySelector("header");
    document.querySelector("#block").classList[elem.getBoundingClientRect().top < elem.offsetHeight ? "add" : "remove"]("visible");
//Когда header не видим, элементу #block присваивается класс visible
});

So, for reference:
getBoundingClientRect().top is the distance from the top of the element to the top border of the browser window.