Event of reaching the edge of window in correct way (onscroll)-CodePudding

Just in case, its my 1th question.

I have: nav menu with transparent background and trying to change backrgound when reached top edge of window.

window.addEventListener("scroll", navSticky);
function navSticky(){
  let nav = document.getElementById('navbar');
  let bounding = nav.getBoundingClientRect();

  if(bounding.top <= 0 ){
      nav.classList.add("sticky");
  }else{
      nav.classList.remove("sticky");
  }
}

*{
  margin: 0;
  text-align: center;
}

body{
  background: lightgrey;
}

header h1{
  padding: 40px;
}

nav{
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, 
  rgba(0,0,0,0),
  rgba(0,255,0, 0.5), 
  rgba(255,0,0, 0.5),
  rgba(0,0,0,0));
  color: black;
}

nav:before{
  content: "now bg transparent";
}

.container{
  min-height: 1000px;
  padding: 20px;
}

nav.sticky{
  background: linear-gradient(to right, 
  rgb(0,255,0), 
  rgb(255,0,0));
  color: white;
}

nav.sticky:before{
  content: "now bg isn't transparent";
}

<body>
  <header>
    <h1>Header, that ask u to scroll page</h1> 
  </header>
  <nav id="navbar">
  </nav>
  <div class ="container">
      When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>

Its work, but I have several questions:

is it possible to do same without js?
is it possible to optimise this script cuz scroll event calling so often..

Thank you!

CodePudding user response：

Unfortunately no.
Yes, the IntersectionObserver API is a very good and performant solution for this specific issue.

The API allows you to observe elements when they enter or leave the viewport. It does this away from the main thread, so you won't get any render blocking code.

In your specific case, observe the <header> element. Whenever the element leaves the view is the same point when the navbar becomes sticky. In the callback check if the isIntersecting property is true or false. This property indicates if the observed element is (partially) in view or not.

const header = document.querySelector('#header');
const nav = document.querySelector('#navbar');

const callback = ([entry]) => {
  const { isIntersecting } = entry;
  nav.classList.toggle('sticky', !isIntersecting);
};

const options = {
  root: null,
  rootMargin: '0px',
  threshold: 0
};

const observer = new IntersectionObserver(callback, options);
observer.observe(header);

* {
  margin: 0;
  text-align: center;
}

body {
  background: lightgrey;
}

header h1 {
  padding: 40px;
}

nav {
  position: sticky;
  top: 0;
  padding: 12px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 255, 0, 0.5), rgba(255, 0, 0, 0.5), rgba(0, 0, 0, 0));
  color: black;
}

nav:before {
  content: "now bg transparent";
}

.container {
  min-height: 1000px;
  padding: 20px;
}

nav.sticky {
  background: linear-gradient(to right, rgb(0, 255, 0), rgb(255, 0, 0));
  color: white;
}

nav.sticky:before {
  content: "now bg isn't transparent";
}

<body>
  <header id="header">
    <h1>Header, that ask u to scroll page</h1>
  </header>
  
  <nav id="navbar"></nav>
  
  <div >
    When we scroll page, and nav reached top of screen, .sticky add to classList<br>
  </div>
</body>